React Native |Slider (carousel) Yapımı

Bu bölümde bası bit şekilde Slider nasıl yapılır onu bakıyoruz.Slider yapmanın bir çok farklı yolu var.Biz burada ScrollView yapsını kullandık sizler Flatlist ile de yapabilirsiniz.

Öncelikle benim Sldier yapımda sadece 3 adet image olucak siz istediğimiz Companenti tanımlayabilirsiniz.

  • Öncelikle bu iş için ScrollView tanımlıyorum.Scroll içinde olması gereken elemanlarımı tanımladım.
  • 3 adet image olucak ve url üzerinden bu data gelicek.
  • horizontal(yatay) özelliği ile Scroll işleminin yatay şekilde olacağını true ile belirttim.Bu değer varsayılan olarak false gelmektedir.
  • pagingEnabled ile bir sayfa yapısı olduğunu böylelikle her bir item değerimi tam ekrana sığacak şekilde göstermesini gerektiğini belirttim.Eğer bunu true yapmazsak Scroll yaptığımızda ekran üzerinde ne kadarlık bir kaydırma işlemi yaparsak o kadar item görürüz.Anlamak için test edin 🙂

Tamam şimdi de Style kısmına bakalım:

  • Burada Scroll özelliğim Safeview içinde yer aldığı için ona flexDirection özelliğine row verdim .Yani container içinde ki tüm elemanlar (yani görseller) yan yana gelecek şekilde ayarladı.
  • imageStil kısmında ise klasik şeyler var.Sadece en alt tarafta width bir değişken görüyoruz.
  • Dismensions ile ekranın genişlik değeri ne ise onu bir const yapısına atamış olduk.Böylelikle farklı cihazlarda sorun yaşamayız.

Projeyi derlediğimizde bu şekilde:

Leave a Reply

*