Создайте карусель с вкладками в React Native

Чтобы понять, что я пытаюсь построить, сначала посмотрим демо:

Как вы можете видеть из картинок, у нас есть две части для создания этого компонента:

• Вкладки (которые вы можете видеть вверху)
• Карусель

Для вкладок вверху я использую горизонтальный FlatList, а для карусели я использую пакет react -native-snap-carouse l. давайте тогда посмотрим, как мне удалось это решить.

Таким образом, с помощью этой инициализации мы получаем вкладки и карусель без какой-либо синхронизации.

Если мы проверим следующий gif, мы увидим, что когда мы изменим индекс карусели и перейдем к продукту другой категории, мы также сделаем активной вкладку той же категории, изменив непрозрачность, и в то же время вы заметите, что вкладки центрирование внутри нашего горизонтального списка. Потому что, если мы не центрируем его, вкладки, которые находятся за пределами ширины экрана, не попадут внутрь нашего экрана, и пользователь не заметит активную вкладку.

Я вставляю фрагмент, который выполняет эту работу

Хорошо, до сих пор мы видели, как менять вкладки, когда мы прокручиваем наши элементы в карусели. Теперь давайте посмотрим, как мы можем добиться прокрутки до нужных элементов, когда пользователь нажимает на вкладки.

Итак, это все! Нам нужно отслеживать нашу активную вкладку и синхронизировать вкладки и карусель вместе.