Bir sayfadan diğer sayfaya değer aktarmak için “this.props.navigation.navigate” metodu içine ek parametreler eklenebilir. Bu bölümde bu ek parametreleri eklemeyi ve eklenen değerlere diğer sayfadan ulaşmayı göreceğiz.
Home.js dosyasının render() metodunun return edilen değeri içine bir Button ekleyelim.
|
1 2 3 4 5 6 7 8 9 |
<Button title="Ekran 3'ye git..." onPress={() => this.props.navigation.navigate('Ekran3', { itemId: 186, digerParam: 'İstediğiniz herhangi bir şey yazabilirsiniz.', }) } /> |
navigate metodu ‘Ekran3’ yönlendireceğiz. Bunun için AppNavigator.js dosyasında Home ve Ekran2 için yaptığımız benzer ayarları Ekran3 içinde yazalım. Yönlendirilecek sayfa ismi belirlendikten sonra {…} arasına parametre ismi ve değerlerimizi yazalım. Değer integer veya string bir türde olabilir. Şimdi sıra, Ekran3.js dosyasından değerlere ulaşmaya geldi.
|
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 29 30 31 32 33 34 35 |
import React, {Component} from 'react'; import {Text, View, Button} from 'react-native'; type Props = {}; export default class Ekran3 extends Component<Props> { render() { const {navigation} = this.props; const itemId = navigation.getParam('itemId', 'Geçerli-ID-Yok'); const digerParam = navigation.getParam('digerParam', 'Geçerli değer, Değer gelmezse diye'); return ( <View> <Text>3. ekran...</Text> <Text>itemId: {JSON.stringify(itemId)}</Text> <Text>otherParam: {JSON.stringify(digerParam)}</Text> <Button title="Tekrar Ekran 3 git... ama yeni bir itemID ile..." onPress={() => this.props.navigation.push('Ekran3', { itemId: Math.floor(Math.random() * 100), })} /> <Button title="Home sayfasına git" onPress={() => this.props.navigation.navigate('Home')} /> <Button title="Bir önceki sayfaya git" onPress={() => this.props.navigation.goBack()} /> </View> ); } } |
“this.props” ifadesini tekrar tekrar yazmamak için const {navigation} değişkeni içine atıyoruz. navigation.getParam ile bir önceki sayfada değer atadığımız parametrelere ulaşıyoruz.
Javascript nesnesini string’e çeviren JSON.stringify metodu ile değerleri çeviriyoruz. Şimdi yeni bir itemID ile tekrar Ekran3 çağıralım. Bunun için bir Button’un onPress metodu içine yukarıdaki fonksiyonu yazıyoruz. Burada navigation stack’i üzerine ekleme yapmak için push metodunu kullanıyoruz. Math.random() fonksiyonu ile ondalık bir sayı üretip 100 ile çarpıp, 0 ile 100 arasında bir sayı elde ediyoruz. Math.floor komutu birçok dilde olduğu gibi ondalıklı kısmı atıp tamsayı değerini bırakıyor. Bu işlemden sonra istediğiniz kadar Ekran3’ü üst üste açabilirsiniz. Stack şeklinde çalıştığını için bir önceki ekrana dönüş yapabilirsiniz.