React Native でタブ付きカルーセルを作成する

私が構築しようとしているものを理解するために、まずデモを見てみましょう:

GIF からわかるように、このコンポーネントを構築するための 2 つの部分があります。

• タブ (上部に表示されます)
• カルーセル

上部のタブには水平 FlatList を使用し、カルーセルにはreact-native-snap-carouse l パッケージを使用しています。それでは、どうやってこれを解決したか見てみましょう。

したがって、この init では、同期せずにタブとカルーセルを取得します。

次の gif を確認すると、カルーセルのインデックスを変更して別のカテゴリの製品に移動すると、不透明度を変更することで同じカテゴリ タブがアクティブになり、同時にタブが水平リストの中央に配置されます。中央に配置しないと、画面幅の外側にあるタブが画面内に入らず、ユーザーがアクティブなタブに気付かないためです。

この仕事をするスニペットを貼り付けています

よし、ここまでカルーセルでアイテムをスワイプするときにタブを変更する方法を見てきました。次に、ユーザーがタブを押したときに正しい項目にスクロールする方法を見てみましょう。

それでおしまい！アクティブなタブを追跡し、タブとカルーセルを一緒に同期する必要があります。