Bugün sizlerle genel manada react-native'e yeni başlayanların problem yaşadığı bir konu olan react-navigation konusundan bahsedeceğim.
Bildiğiniz gibi react-native üzerinde ekran değiştirmek üzere kullanılabilecek pek çok eklenti mevcut ancak ben projelerimde bunlardan en stabili olarak gördüğüm react-navigation'u kullanmayı tercih ediyorum.
Öncelikle uygulamamızın açık olduğu dizinde aşağıdaki 3 komutu sırasıyla çalıştırmamız gerekiyor.
1-) npm install --save react-navigation
2-)npm install --save react-native-gesture-handler
3-)react-native link react-native-gesture-handler
bu komutları çalıştırırken hata alabilirsiniz.Eğer başarılı bir şekilde sonuçlanmadan
size hata mesajları dönüyorsa derleyicinizi(ben visual studio code kullanıyorum) yönetici
olarak çalıştırarak tekrar deneyin.
Bu işlemlerin ardından Android projemizde bazı eklemeler yapmamız gerekecek. Uygulamayı
sadece IOS olarak çalıştırıyorsanız herhangi bir değişiklik yapmanıza gerek yok.
Android projemizdeki MainActivity.java dosyasına gelerek öncelikle aşağıdaki satırları
import olarak ekliyoruz.
import com.facebook.react.ReactActivityDelegate; import com.facebook.react.ReactRootView; import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
Ardından yine aşağıda vermiş olduğum metodu birebir şekilde MainActivity class ının
içerisine ekliyoruz.
@Override protected ReactActivityDelegate createReactActivityDelegate() { return new ReactActivityDelegate(this, getMainComponentName()) { @Override protected ReactRootView createRootView() { return new RNGestureHandlerEnabledRootView(MainActivity.this); } }; }
Bu işlemlerin ardından sayfa değişikliğine hazırız :)
Şimdi gelelim bunun uygulama kısmına...
Sizlere 2 örnek ile nasıl uygulanacağını göstereceğim.Öncelikle tek bir .js dosyası
içerisinde oluşturduğunuz farklı screenler arası geçiş yapmaktan bahsedelim.
Aşağıdaki kodları inceleyecek olursak
Öncelikle react-navigation' ı projemize import ediyoruz. Sonrasında gördüğünüz gibi HomePage ve
DetailPage olmak üzere 2 adet view oluşturuyoruz.
Amacımız HomePage deki butona basıldığında DetailPage'in açılması.Bunun için HomePage içerisindeki
butonumuzun onPress event'inin içerisini 12.satırda görüldüğü şekilde düzenliyoruz.
Şimdi sıra geldi mapping'e.Sayfalarımızı tanımak için bir navigator oluşturmamız gerekiyor.
Gördüğünüz gibi 27. satırdan itibaren bu tanımlama yapılmış ve butonun onpress event'i içerisinde
de burada tanımlaması yapılan "Details" ifadesi kullanılmış.
Bu yönlendirmelerde herhangi bir hata yok ise aşağıdaki şekilde ekran karşınıza gelecektir.
Şimdi sıra geldi view tanımlamalarımızın farklı olduğu case'i handle etmeye.Böyle bir durumda
yapmamız gereken işlem ilkinden çok da farklı değil aslında.Örneğin App.js ile aynı klasörde bir LoginPage.js
tanımladığımızı varsayalım ve LoginPage.js dosyamızın içeriği de aşağıdaki gibi olsun :
Ana sayfa içerisinden yine aynı butona tıklandığında bu dosyanın açılması için App.js içerisinde ufak değişiklikler yapıyoruz.
Gördüğünüz üzere 4. satırda öncelikle LoginPage.js dosyasını import ettik. From'dan sonra gelen kısım LoginPage.js dosyamızın konumunu belirtiyor bu bilgiyi dikkate alarak import etmemizde fayda var zira farklı bir klasörde bu dosyayı açarsanız içerik de değişecektir.
Ardından 31. satırda görüldüğü gibi mapping'imi değiştiriyoruım ve LoginPage 'i çağırmak için Login keyword'ünü kullanacağımı bildiriyorum ve son olarak 13.satırda butona basıldığında Login ile adreslenen sayfayı açmak istiyorum.
Bu kodları cihazınıza attığınızda aşağıdaki şekilde bir sonuçla karşılaşacaksınız:
İşte react-navigation kullanımı basitçe böyle diyebiliriz.
Bitirmeden önce değinmek istediğim bir nokta var;eğer ilk kurulumlar sırasında
"Unable to run react native project due to react-native-gesture-handler" tarzında bir hata ile karşılaşırsanız (ki ben karşılaştım) yapmanız gereken işlem gayet basit:
settings.gradle dosyasının içerisinde : '..\node_modules\react-native-gesture-handler\android' şeklinde gördüğünüz string',i '../node_modules/react-native-gesture-handler/android' şeklinde güncelleyin.Böylece almış olduğunuz hatadan kurtulmuş olacaksınız diyerek bu yazıya da son veriyorum.
Esen Kalın...
