どうもhayaplexです。ReactNative便利ですよね！
複数の画面遷移をするような仕様でプログラムを書いていると
「A→B、B→A」みたいな画面遷移でパラメータを渡したくなることもあります。
Bで設定した値を、goBack()した際に読み込みたいこともあるのではないでしょうか。今回はその方法を紹介します。
サンプルソース
親シーン
|
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 36 |
class hoge1Screen extends React.Component { constructor(props) { super(props); } // 引数がない場合 test1 (){ console.log('test1'); } // 引数がある場合 test2 = data => { console.log('test2'); console.log('data',data); } onButtonPress () { this.props.navigation.navigate('hoge2', { index: 100, test1: () => this.test1(), // 引数がない場合 test2: this.test2, // 引数がある場合 }); } render() { <View> <Button title="Test" color="white" onPress={() => this.onButtonPress()} /> </View> } } |
子シーン
|
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 |
class hoge2Screen extends React.Component { constructor(props) { super(props); let params = this.props.navigation.state.params; let index = this.props.navigation.state.params.index; console.log('params',params); console.log('index',index); } onButtonPress () { let array = [{ 'hoge1': 'hoge', 'hoge2': 'hogehoge', }] this.props.navigation.state.params.test1(); this.props.navigation.state.params.test2(array); this.props.navigation.goBack(); } render() { <View> <Button title="Test" color="white" onPress={() => this.onButtonPress()} /> <Text>{this.props.navigation.state.params.index}</Text> </View> } |
ログ
親から子
params Object {
“index”: 100,
“test1”: [Function test1],
“test2”: [Function anonymous],
}
index 100
“index”: 100,
“test1”: [Function test1],
“test2”: [Function anonymous],
}
index 100
子から親
test1
test2
data Array [
Object {
“hoge1”: “hoge”,
“hoge2”: “hogehoge”,
},
]
test2
data Array [
Object {
“hoge1”: “hoge”,
“hoge2”: “hogehoge”,
},
]
ReactNativeでは、厳密には子から親にパラメータを渡したりはできません。そのため、goBack()時に親の関数を叩いてパラメータを渡しているように見せています。
あくまでサンプルソースのため、渡した値はstateなどで管理したほうが良いかと。
コメントを残す