Erstellen Sie ein Karussell mit Registerkarten in React Native

Um zu verstehen, was ich zu bauen versuche, sehen wir uns zuerst die Demo an:

Wie Sie den Gifs entnehmen können, haben wir zwei Teile, um diese Komponente aufzubauen:

• Die Registerkarten (die Sie oben sehen können)
• Karussell

Für die Registerkarten oben verwende ich nur horizontale FlatList und für das Karussell verwende ich das Paket „react-native-snap-carouse l“. Lassen Sie uns dann sehen, wie ich es geschafft habe, das herauszufinden.

Mit dieser Initialisierung erhalten wir also die Registerkarten und das Karussell ohne Synchronisierung.

Wenn wir das folgende GIF überprüfen, werden wir sehen, wenn wir den Index des Karussells ändern und zu einem anderen Kategorieprodukt wechseln, machen wir auch dieselbe Kategorie-Registerkarte aktiv, indem wir die Deckkraft ändern, und gleichzeitig werden Sie feststellen, dass die Registerkarten sind in unserer horizontalen Liste zentriert werden. Denn wenn wir es nicht zentrieren, kommen die Tabs, die sich außerhalb der Bildschirmbreite befinden, nicht in unseren Bildschirm und der Benutzer wird den aktiven Tab nicht bemerken.

Ich füge das Snippet ein, das diese Aufgabe erfüllt

Okay, bisher haben wir gesehen, wie man die Tabs wechselt, wenn man durch unsere Artikel im Karussell wischt. Lassen Sie uns nun sehen, wie wir erreichen können, zu den richtigen Elementen zu scrollen, wenn der Benutzer auf Registerkarten drückt.

Das war's! Wir müssen unseren aktiven Tab verfolgen und die Tabs und das Karussell miteinander synchronisieren.