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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import React, {Component} from 'react'; import {Text, View, Button} from 'react-native'; type Props = {}; export default class Ekran4 extends Component<Props> { static navigationOptions = { title: 'Ekran 4', }; render() { return ( <View> <Text>4. ekran...</Text> </View> ); } } |
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.
|
1 2 3 4 5 6 7 8 |
<Button title="Ekran 5'ye git..." onPress={() => this.props.navigation.navigate('Ekran5', { digerParam: 'Başlık bilgisi: Params', }) } /> |
Ekran5.js oluşturup aşağıdaki kodları yazalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import React, {Component} from 'react'; import {Text, View, Button} from 'react-native'; type Props = {}; export default class Ekran5 extends Component<Props> { static navigationOptions = ({ navigation }) => { return { title: navigation.getParam('digerParam', 'Geçerli Değer, Değer Gelmezse'), }; }; render() { return ( <View> <Text>5. ekran...</Text> </View> ); } } |
Bu başlık bilgisine aşağıdaki gibi stil ekleme şansınız vardır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
import React, {Component} from 'react'; import {Text, View, Button} from 'react-native'; type Props = {}; export default class Ekran5 extends Component<Props> { static navigationOptions = ({ navigation }) => { return { title: navigation.getParam('digerParam', 'Geçerli Değer, Değer Gelmezse'), headerStyle: { backgroundColor: '#f4511e', }, headerTintColor: '#fff', headerTitleStyle: { fontWeight: 'bold', }, }; }; render() { return ( <View> <Text>5. ekran...</Text> </View> ); } } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
const AppNavigator = createStackNavigator({ Home: { screen: Home }, Ekran2: {screen: Ekran2}, Ekran3: {screen: Ekran3}, Ekran4: {screen: Ekran4}, Ekran5: {screen: Ekran5} }, { initialRouteName: 'Home', defaultNavigationOptions: { headerStyle: { backgroundColor: '#f4511e', }, headerTintColor: '#fff', headerTitleStyle: { fontWeight: 'bold', }, }, } ); |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import React, {Component} from 'react'; import {Text, View, Image} from 'react-native'; class LogoTitle extends React.Component { render() { return ( <Image source={require('./img/home.png')} style={{ width: 30, height: 30 }} /> ); } } type Props = {}; export default class Ekran6 extends Component<Props> { static navigationOptions = { headerTitle: <LogoTitle />, }; render() { return ( <View> <Text>6. ekran...</Text> </View> ); } } |
LogoTitle sınıfı bir resim döndürür. headerTitle bölümünde bu bileşen olarak çağrılabilir.