次のページの一部を示すページネーゼーション+ネイティブScrollViewに反応します

Question

私はカードが一度に1つずつユーザーに提示されるインターフェイスを作成しようとしています。ユーザーはページ単位で左右にスクロールすることができます。私はまた、見るべきものがあるというヒントとして、現在のカードの左右に少量のカードを見たいと思っています。この非常にラフな例は次のようになります。

現在のコードは次のとおりです。

<ScrollView 
    style={{width: Dimensions.get('window').width, height: 300}} 
    horizontal={true} 
    pagingEnabled={true} 
    showsHorizontalScrollIndicator={false} 
    alwaysBounceHorizontal={false} 
    automaticallyAdjustContentInsets={false}> 
    <View style={{width: 200, height: 300}}></View> 
    <View style={{width: 200, height: 300}}></View> 
    <View style={{width: 200, height: 300}}></View> 
</ScrollView> 

`

Answer 1

私はthis SO questionからmy answerはあなたを助けるかもしれないと思います。

要約すると、ScrollView、さらにはFlatListでこの種類のレイアウトを作成できます。

• あなたが小道具snapToIntervalとsnapToAlignmentを使用できるため、スナップ効果、：しかし、2つのトリッキーな部分があります。残念ながら、これらはiOS専用です。

• 多くのカスタムロジックを必要とする非アクティブなスライドのアニメーション。

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

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

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

---

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