React Native'de Sekmeli Atlıkarınca Oluşturun

Ne oluşturmaya çalıştığımı anlamak için önce demoyu görelim:

GIF'lerden de görebileceğiniz gibi, bu bileşeni oluşturmak için iki parçamız var:

• Sekmeler (üstte görebileceğiniz)
• atlıkarınca

En üstteki sekmeler için sadece yatay FlatList kullanıyorum ve carousel için tepki-yerel-snap-carouse l paketini kullanıyorum. o zaman bu işi nasıl başardığımı görelim.

Yani bu init ile sekmeleri ve carousel'i herhangi bir senkronizasyon olmadan alıyoruz.

Aşağıdaki gifi kontrol edersek, carouselin indexini değiştirdiğimizde ve farklı bir kategori ürüne gittiğimizde görürüz ki opaklığı değiştirerek aynı kategori sekmesini de aktif hale getiriyoruz ve aynı zamanda sekmelerin olduğunu fark edeceksiniz. yatay listemizde ortalanıyor. Çünkü ortalamazsak ekran genişliğinin dışındaki sekmeler ekranımızın içine girmeyecek ve kullanıcı aktif sekmeyi fark etmeyecektir.

Bu işi yapan pasajı yapıştırıyorum

Pekala, şimdiye kadar atlıkarıncadaki öğelerimizi kaydırırken sekmeleri nasıl değiştireceğimizi gördük. Şimdi kullanıcı sekmelere bastığında doğru öğelere kaydırmayı nasıl başarabileceğimizi görelim.

İşte bu kadar! Aktif sekmemizi takip etmemiz ve sekmeleri ve atlıkarıncayı birlikte senkronize etmemiz gerekiyor.