リアクションネイティブ水平スクロールページ設定：プレビュー次のページ/カード

Question

1ページの特別な要件でページネーションが有効になっている水平スクロールビューにしたい：各ページ（またはカード）はコンテナの幅の90％です。残りの10％は次のページのプレビューでなければなりません。

ScrollViewでこれを行うことはできますか？コンテナの幅を取る代わりに、ページ分割の幅を何とか指定することはできますか？

（画像はこれと同様の質問から撮影：React Native Card Carousel view?）

Answer 1

をオフにする必要があります。しかし、本当に難しい部分はスナップ効果です。あなたはそれを達成するために小道具snapToIntervalとsnapToAlignmentを使うことができます（Vasil Enchev's answer参照）。残念ながら、これらはiOS専用です。

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

プラグインは現在、FlatList（バージョン> = 3.0.0）の上に構築されており、膨大な数のアイテムを処理するのに最適です。それは、プレビュー（あなたが後にしている効果）、iOSとAndroid向けスナップ効果、視差画像、RTLのサポート、および多くを提供します。

showcaseをご覧になると、これで達成できることを把握できます。私たちは常にそれを改善しようとしているので、あなたの経験をプラグインと共有するのをためらってください。

---

編集：two new layoutsバージョン3.6.0（火口のような効果を持つカードの効果と他のスタックを有するもの）に導入されています。楽しい！

Answer 2

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

https://facebook.github.io/react-native/docs/scrollview.html#horizontal

そして、あなたが指定する内部ビューを作成することができますあなたの幅要件。

<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> 

Answer 3

あなたはScrollViewのcontentOffsetとscrollToプロパティを見ることができます。あなたができることは論理的には、ページが変わるたびに（ほとんどの場合、次のページに移動したとき）、スクロールビュー内の次の項目が表示されるように、必要に応じて10％程度の余分なオフセットを与えることができます。

ご希望の場合は、詳細をお知らせください。

Answer 4

私はこれを理解するまでこれと戦うのに多くの時間を費やします。だから、もし誰かを助けてくれたら、私の解決策です。

https://snack.expo.io/H1CnjIeDb

問題は、あなたが絶対にScrollViewまたは、より良い、FlatListでそれを行うことができ、これらすべての要求されたされ、改ページは

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