Props Kullanımı

React Native ile geliştirelen uygulamalarda sınıflar yaratıldığında belirtilen parametreler props olarak tanımlanmıştır. props yapısında belirtilen parametreler sabittir. Yani state parametrelerinden farkı değişkenlik göstermemeleridir.

props parametreleri bir sayfadan başka bir sayfaya geçişlerde gönderilen bütün değişkenleri içerebilmektedir. Yani bir sayfadan diğer sayfaya gönderilen parametreler props içerisinde bulunur ve biz bunları props içerisinden çekip alabiliriz. Bunu örnek bir uygulama ile gösterelim.

Daha önce hazırlamış olduğumuz 2 sayfalı basit uygulamamız üzerinden işlemlere devam edelim. Burada iki farklı örnek üzerinde duracağız. Birincisi sayfalar arası parametre gönderme, ikincisi ise birden fazla kullanacağımız bir ifadenin başka bir sınıfı ile tanımlanarak bu iki sınıf arasında parametre kullanma.

Öncelikle birinci sayfamızdan ikinci sayfamıza parametre gönderelim ve bunu ikinci sayfamızda kullanalım. Bunun için birinci sayfamızda, ikinci sayfamızı çağırma işlemini tanımladığımız navigate bölümünde göndereceğimiz parametreleri tanımlayacağız.

Daha sonra ise parametreleri kullanacağımız sınıfta props ile parametrelerimizi çekip alacağız.

Birinci sayfadan ikinci sayfaya isim ve yas parametreleri gönderdik. Ikinci sayfada ise bu parametreleri props ile aldık. Burada dikkat edilmesi gereken husus gelen parametrelerin değişken adlarını doğru olarak tanımlamamız. Aşağıdaki şekilde görüleceği üzere parametreler doğru bir şekilde çekilmiş oldu.

Şimdi ise ikinci örneğe gelelim. Mesela kullanıcıya bir mesaj verecek olalım. Bu mesajda bayan ise ‘Mrs’, bay ise ‘Ms’ sıfatlarını kullanacak olalım ve eğer bayan ise yazı rengimiz ‘kırmızı’, bay ise ‘mavi’ olsun. Bu işlemi birçok yerde kullanacak olalım. Bu durumda bir sınıf oluşturup bunun üzerinden gitmemiz daha temiz olacaktır. Yoksa her seferinde ya da her yerde yeniden component (View,text vb.) kullanmamız uygulamayı hem şişirir hem yavaşlatır hem de büyük projelerde ufak bir değişiklik için fazla uğraştırabilir. Bu sebeple yeni bir sınıf oluşturalım ve bunun üzerinden işlemlerimizi yapalım.

Yeni bir sınıf oluşturma işlemini aynı dosya içerisinde yapabildiğimiz gibi farklı bir dosya içerisinde de yapabiliriz. Bunun için yeni bir dosya oluşturacağız ve adı YeniSinif.js olsun.

Yeni oluşturduğumuz sınıfımızın içeriğini hedeflediğimiz şekilde dolduralım. Kodda şu işlemi yapacağız. Gelen parametreleri kontrol edeceğiz. Eğer ki ‘mr’ parametresi geldi ise yazı rengimiz ‘mavi’, ‘mr’ gelmedi ise ‘mrs’ geldiğini farz ederek ‘kırmızı’ olsun diyoruz. Ekrana da gelen parametreyi yazdırıyoruz.

Not: ‘mr’ ya da ‘mrs’ parametresi yerine başka bir parametre de gönderebiliriz fakat bunun kontrolünü burada yapmadık. Amacımız props yapısını açıklayabilmek. Bunu belirtmek gerekebilir 🙂

Başka bir dosyanın sınıfını kullanmak istediğimizde onu import etmemiz gerekmektedir. Bunun için dosyanın bulunduğu yolu da göz önüne alarak import yapalım.

Şimdi ise bu sınıfı kullanalım.

Uygulamamızı çalıştıralım ve sonuçları görelim. iOS cihazda çalıştıracağımız için react-native run-ios diyoruz.

Teşekkürler.