web-dev-qa-db-ja.com

React-Native水平スクロールビューの改ページ：次のページ/カードのプレビュー

ページネーションを有効にした水平方向のScrollViewには、1つの特別な要件があります。各ページ（またはカード）はコンテナ幅の90％です。残りの10％は次のページのプレビューです。

ScrollViewでこれを行うことは可能ですか？コンテナの幅を取得する代わりに、ページネーションの幅を何らかの方法で指定できますか？

Carousel （この同様の質問からの画像： React Native Card Carousel view？ ）

react-nativepaginationscrollviewcarouselhorizontalscrollview
11
Johannes Filter

ScrollView、またはさらに良いことにFlatListを使用して、絶対にそれを行うことができます。ただし、本当に難しい部分はスナップ効果です。小道具snapToIntervalとsnapToAlignmentを使用してそれを達成できます（ Vasil Enchevの答え を参照）。残念ながら、これらはiOS専用です。

同僚と私は、この特定のニーズに応えるプラグインを作成しました。最終的にはオープンソース化したので、試してみるのはあなただけです： react-native-snap-carousel 。

プラグインはFlatList（バージョン> = 3.0.0）の上に構築され、膨大な数のアイテムを処理するのに最適です。 プレビュー（後の効果）、スナップ効果 iOSおよびAndroidの場合、視差画像、RTLサポートなど。

showcase を見ると、何が達成できるかを把握できます。プラグインとの経験を共有することをheしないでください。私たちは常に改善を試みています。

react-native-snap-carousel archriss showcasereact-native-snap-carousel archriss aix

編集： 2つの新しいレイアウト がバージョン3.6.0に導入されました（1つはカードのスタック効果があり、もう1つは火口のような効果があります）。楽しい！

react-native-snap-carousel stack layoutreact-native-snap-carousel tinder layout

17
bend

私はそれを理解するまでこれと戦うのに多くの時間を費やしているので、誰かを助ける場合の私の解決策はここにあります。

https://snack.expo.io/H1CnjIeDb

問題はこれらすべてが必要で、ページネーションをオフにする必要があることでした

horizontal={true}
decelerationRate={0}
snapToInterval={width - 60}
snapToAlignment={"center"}
18
Vasil Enchev

水平ビューの小道具をスクロールビューに渡すことができます。

https://facebook.github.io/react-native/docs/scrollview.html#horizo​​ntal

次に、内部にビューを作成して、幅の要件を指定できます。

<ScrollView 
  ref={(snapScroll) => { this.snapScroll = snapScroll; }}
  horizontal={true} 
  decelerationRate={0}
  onResponderRelease={()=>{

   var interval = 300; // WIDTH OF 1 CHILD COMPONENT 

   var snapTo = (this.scrollingRight)? Math.ceil(this.lastx / interval) : 
    Math.floor(this.lastx / interval);
   var scrollTo = snapTo * interval;
   this.snapScroll.scrollTo(0,scrollTo);
  }}
  scrollEventThrottle={32}
  onScroll={(event)=>{
    var nextx = event.nativeEvent.contentOffset.x;
    this.scrollingRight = (nextx > this.lastx);
    this.lastx = nextx;
  }}
  showsHorizontalScrollIndicator={false} 
  style={styles.listViewHorizontal}
  >

  {/* scroll-children here */}

</ScrollView>
2
Gabriel Mesquita

ScrollViewのcontentOffsetおよびscrollToプロパティを確認できます。論理的にあなたができることは、ページが変わるたびに（ほとんど次のページに移動するとき）、スクロールビューの次のアイテムが見えるように、必要に応じて10％程度の余分なオフセットを提供することができます.

これがお役に立てば幸いです。追加の詳細が必要な場合はお知らせください。

0
Abhinandan Sahgal