はじめに
こんにちはnukkyです。
ブログを書きながらアプリを作成しているのですが、アプリの基本といえば画面遷移ということで今回は画面遷移をやってみようと思います。
今回、画面遷移に使用するライブラリは「React Navigation」を使用したいと思います。ナビゲーション機能を有するライブラリは他にもあるのですが、私自身も初心者ということで公式でも紹介されている「React Navigation」で今回は実装したいと思います。
ターミナルから「React Navigation」を使用したいプロジェクトに移動し以下を実行してください。
| 1 2 3 | $npm install --save react-navigation $npm install --save react-native-gesture-handler $react-native link react-native-gesture-handler |
「React Navigation」の準備は完了です。
実装
以下は1ソースの中に２画面(2class)用意したサンプルコードになります。
| 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 37 38 39 40 41 42 43 44 45 46 | import React from 'react'; import { View, Text, Button } from 'react-native'; import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation'; class HomeScreen extends React.Component { render() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Home Screen</Text> <Button title="Go to Details" onPress={() => { this.props.navigation.dispatch(StackActions.reset({ index: 0, actions: [ NavigationActions.navigate({ routeName: 'Details' }) ], })) }} /> </View> ); } } class DetailsScreen extends React.Component { render() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Details Screen</Text> </View> ); } } const AppNavigator = createStackNavigator({ Home: { screen: HomeScreen, }, Details: { screen: DetailsScreen, }, }, { initialRouteName: 'Home', }); export default createAppContainer(AppNavigator); |
まずは「React Navigation」の機能使用するためにインポートをします。
| 1 | import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation'; |
「createStackNavigator」で今回の画面情報を登録しておきます
| 1 2 3 4 5 6 7 8 9 10 | const AppNavigator = createStackNavigator({ Home: { screen: HomeScreen, }, Details: { screen: DetailsScreen, }, }, { initialRouteName: 'Home', }); |
今回は「Home」と「Details」の２画面になります。「createAppContainer」でこの情報を登録します。
| 1 | export default createAppContainer(AppNavigator); |
あとはサンプルコードのようにボタンを押下したタイミングで「NavigationActions」を呼び出すことで画面遷移を行うことができます。
| 1 2 3 4 5 6 7 8 9 10 11 | <Button title="Go to Details" onPress={() => { this.props.navigation.dispatch(StackActions.reset({ index: 0, actions: [ NavigationActions.navigate({ routeName: 'Details' }) ], })) }} /> |
さいごに
今回は「React Navigation」で実装を行ってみましたが、アプリの機能やデザインによっては他のライブラリも有効そうなので使用してみた際にはまたご紹介したいと思います。
おすすめ書籍
