06.04. React Navigation: Header

React Navigation ekranın üstünde yer alan Header Bar bölümüne başlık ve stil oluşturulabilir. Bu bölüm bu işlemlerin nasıl yapılacağını basit örnekler üzerinden gösterir.

Ekran4.js oluşturup aşağıdaki kodları ekleyelim.

navigationOptions static bir değerdir. title parametresi içinde başlık bilgisini içerir. AppNavigator.js ve Home.js üzerinde önceki örneklerdeki gibi değişikliklere gidelim.

Params Kullanımı

Başlık bilgisini bir önceki sayfadan “this.props.navigation.setParams” özelliği içinde alabilir ve sonraki sayfada kullanabiliriz. AppNavigator.js Ekran5 için gerekli kodları ekleyelim. Sonra Home.js içine aşağıdaki gibi bir Button oluşturalım.

Ekran5.js oluşturup aşağıdaki kodları yazalım.

Bu başlık bilgisine aşağıdaki gibi stil ekleme şansınız vardır.

Ekranlar arası genel stil 

Tüm ekranlar için yukarıdaki gibi bir kod yazmak çok zahmetli ve ileri de değiştirilmesi zor bir süreçtir. Genel CSS’te olduğu gibi bir noktadan tüm başlıkları düzenleme şansımız vardır. Bunun için createStackNavigator bölümüne gidelim. Bu örnekte bu bölüm AppNavigator.js dosyasındandır.

Tahmin ettiğiniz gibi genel kuralların üzerine yukarıdaki gibi sayfaya özel kurallar yaratabilirsiniz. Bu durumda genel durumun üzerine yazmış olursunuz. (Override)

Başlık olarak resim ekleme

Başlık bölümde kendinize özel bir ikon olmasını isteyebilirsiniz. Bu durumda:

LogoTitle sınıfı bir resim döndürür. headerTitle bölümünde bu bileşen olarak çağrılabilir.