navigationOptions ile header kısmını düzenleme
Oluşturduğumuz react elemeti aslında bir javascript objesi olduğu için bu objeye navigationOptions isminde bir değer verdiğimiz takdirde react-navigation bu değerleri okuyup, bunlara göre gerekli ayarlamaları yeniden yapacaktır.
const Home = () => (
<View></View>
);
gibi Home isminde bir elementimiz olduğunu varsayalım ve bu elementin headerini aşağıdaki şekilde navigationOptions objesi ile düzenleyebiliriz.
Home.navigationOptions = { }
Bu şekilde bu obje içine verilen değerleri react-navigation algılıyor,
Bu değerlerden bazıları şu şekilde
Home.navigationOptions = {
headerTitle: "sayfa başlığı",
headerStyle: {
backgroundColor: "header arkaplan rengi",
},
headerTintColor: "header title yazı rengi"
}
bu değerleri dinamik olarak değiştirmekte mümkün bunun için aşağıdaki gibi bir yapu kullanabiliriz.
Home.navigationOptions = navigationData => {
const title = navigationData.navigation.getParam("baslik");return {
headerStyle: {
headerTitle: title,
},
}
Bu şekilde başlık kısmında bunları kullanmamız mümkün