reactnative:stacknavigator
差分
この文書の現在のバージョンと選択したバージョンの差分を表示します。
| 次のリビジョン | 前のリビジョン | ||
|
reactnative:stacknavigator [2019/01/26 02:24] ips 作成 |
reactnative:stacknavigator [2019/01/26 07:17] (現在) ips |
||
|---|---|---|---|
| ライン 1: | ライン 1: | ||
| ====== stacknavigator ====== | ====== stacknavigator ====== | ||
| - | ====== 基本 ====== | + | ===== 基本 ===== |
| + | |||
| + | スタックナビゲーターは文字通り、画面を積み重ねていくイメージの画面遷移をする。 | ||
| + | 戻るで一つ前の画面に戻ることができる。 | ||
| + | |||
| + | <code> | ||
| + | npm install --save react-navigation | ||
| + | </code> | ||
| App.js | App.js | ||
| ライン 34: | ライン 41: | ||
| - | const RootStack = createStackNavigator( | + | const RootStack = createStackNavigator( //使用する画面を設定。 |
| { | { | ||
| Home: { | Home: { | ||
| ライン 47: | ライン 54: | ||
| }, | }, | ||
| { | { | ||
| - | initialRouteName: 'Home', | + | initialRouteName: 'Home', //デフォルトの画面 |
| } | } | ||
| ); | ); | ||
| ライン 80: | ライン 87: | ||
| <Text>Home Screen</Text> | <Text>Home Screen</Text> | ||
| - | <Button buttonStyle={styles.button} title="★☆☆" onPress={(e) => this.props.navigation.push('Details',1)}> | + | <Button buttonStyle={styles.button} title="★☆☆" onPress={(e) => this.props.navigation.push('Details',1)}> //画面遷移＋prop渡し |
| </Button> | </Button> | ||
| - | <Button buttonStyle={styles.button} title="★★☆" onPress={(e) => this.props.navigation.push('Details',2)}> | + | <Button buttonStyle={styles.button} title="★★☆" onPress={(e) => this.props.navigation.push('Details',2)}> //画面遷移＋prop渡し |
| </Button> | </Button> | ||
| - | <Button buttonStyle={styles.button} title="★★★" onPress={(e) => this.props.navigation.push('Details',3)}> | + | <Button buttonStyle={styles.button} title="★★★" onPress={(e) => this.props.navigation.push('Details',3)}> //画面遷移＋prop渡し |
| </Button> | </Button> | ||
| ライン 155: | ライン 162: | ||
| <Button | <Button | ||
| title="Go to Details... again2" | title="Go to Details... again2" | ||
| - | onPress={() => this.props.navigation.push('Details')} | + | onPress={() => this.props.navigation.push('Details')} //更に同じ画面を積み重ねる |
| /> | /> | ||
| <Button | <Button | ||
| title="Go to Home" | title="Go to Home" | ||
| - | onPress={() => this.props.navigation.navigate('Home')} | + | onPress={() => this.props.navigation.navigate('Home')} //どれだけ積み重ねていてもhomeに戻る |
| /> | /> | ||
| <Button | <Button | ||
| title="Go back" | title="Go back" | ||
| - | onPress={() => this.props.navigation.goBack()} | + | onPress={() => this.props.navigation.goBack()} //一つ前の画面に戻る |
| /> | /> | ||
| </View> | </View> | ||
| ライン 171: | ライン 178: | ||
| </code> | </code> | ||
| - | ===== StackNavigator間コンポーネント間のデータ渡し ===== | + | ===== StackNavigator間コンポーネント間のデータ渡し１ ===== |
| pushするときの第二引数にセットできる | pushするときの第二引数にセットできる | ||
| ライン 184: | ライン 191: | ||
| </code> | </code> | ||
| + | ===== StackNavigator間コンポーネント間のデータ渡し２ ===== | ||
| + | <code> | ||
| + | this.props.navigation.push('Details',{star:1,rank:2} | ||
| + | </code> | ||
| + | のようにすることで、 | ||
| + | <code> | ||
| + | {this.props.navigation.state.params.star} {this.props.navigation.state.params.rank} | ||
| + | </code> | ||
| + | のように取り出すことができる。 | ||
reactnative/stacknavigator.1548437094.txt.gz · 最終更新: 2019/01/26 02:24 by ips
