- 画面遷移の種類
- 画面遷移の実装方法
について解説していきます。
1. 概要
ReactNativeでナビゲーション(画面遷移)を実装する時に使用するライブラリは、以下の3種類が挙げられます。
・Stack Navigation
・Tab Navigation (Bottom, Top)
・Drawer Navigation
今回は、上記の3つの中の「Stack Navigation(createStackNavigator)」を使って画面遷移を実装していきます。
本記事を読むことでこのようなアプリを作ることができます。
また、以下の記事で、他のNavigationを使った画面遷移の方法も紹介していますので、ぜひそちらもご覧ください。
本記事の内容 Tab Navigation(ver5.0)を使った画面遷移の方法 について解説していきます。 前回の記事では、stack Navigation(createStackNavigator)を使って画面遷移の …
本記事の内容 Drawer Navigation(ver5.0)を使った画面遷移の方法 について解説していきます。 また、以下の記事で、他のNavigationを使った画面遷移の方法も紹介していますので、ぜひそちらもご覧 …
2. StackNavigatorの実装
(createStackNavigator)
2.1 パッケージのインストール
まず、ターミナルで以下のコマンドを実行してパッケージをインストールします。
|
1 |
npm install --save @react-navigation/stack @react-navigation/native react-native-gesture-handler react-native-screens @react-native-community/masked-view |
2.2. ソースコード
フォルダ構成
今回のプログラムのフォルダ構成は、以下になっています。|
1 2 3 4 |
├── component │ ├── HomeScreen.js │ └── SecondScreen.js └── App.js |
App.js
|
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 47 |
import React from 'react'; import { createStackNavigator } from '@react-navigation/stack'; import { NavigationContainer } from '@react-navigation/native'; import HomeScreen from './component/HomeScreen'; import SecondScreen from './component/SecondScreen'; const Stack = createStackNavigator(); const App = () => { return ( <NavigationContainer> <Stack.Navigator initialRouteName= "HomeScreen" // headerMode="none" screenOptions={{ headerStyle: { backgroundColor: "hsla(210, 90%, 50%, 0.8)", }, headerTintColor: "white", headerBackTitleVisible: false, headerTitleStyle: { fontSize: 24, color: "lightgray" }, }} > {/* HomeScreen */} <Stack.Screen name="HomeScreen" component={HomeScreen} options={{ title: 'Home' }} /> {/* SecondScreen */} <Stack.Screen name="SecondScreen" component={SecondScreen} options={{ gestureEnabled: false, headerTitle: "Second" }} /> </Stack.Navigator> </NavigationContainer> ); } export default App; |
- @react-navigation/stackをインポートする
- Stack.Screenに画面遷移でさせるスクリーンを設定する。
- ヘッダーやスクリーンに関する設定を行う。
＜Stack.Navigatorコンポーネント＞について解説
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<Stack.Navigator initialRouteName= "HomeScreen" // headerMode="none" screenOptions={{ headerStyle: { backgroundColor: "hsla(210, 90%, 50%, 0.8)", }, headerTintColor: "white", headerTintColor: "white", headerBackTitleVisible: false, headerTitleStyle: { fontSize: 24, color: "lightgray" }, }} > |
| initialRouteName | ナビゲーターのデフォルト画面を設定します。 |
| headerMode | ヘッダーを非表示にすることができる。自身でヘッダーを用意すると言う方は、これにfalseを設定する。 |
| screenOptions | ヘッダーのカスタマイズする時に使う |
| headerStyle | ヘッダーの高さ、背景色を設定 |
| headerTitleStyle | ヘッダーのタイトル色 |
| headerTintColor | 戻るボタンの色 |
| headerBackTitle | 戻るボタンで使用されるタイトル文字列 |
| headerBackTitleVisible | falseを設定で戻るボタンのタイトルを非表示 |
＜Stack.Screenコンポーネント＞について解説
|
1 2 3 4 5 6 |
{/* SecondScreen */} <Stack.Screen name="SecondScreen" component={SecondScreen} options={{ gestureEnabled: false, headerTitle: "Second" }} /> |
| name, component | コンポーネント名 |
| options | オプションを設定。アニメーションやヘッダーの設定が可能。 |
| gestureEnabled | ジェスチャーを使用して画面を閉じることができるかどうか。falseを設定することで、スワイプで画面遷移をできなくすることができる。 |
| headerTitle(または、title) | ヘッダーのタイトル |
| headerTransparent | ぼかしビューをレンダリングし、半透明のヘッダーを作成できます |
全スクリーンに共通のオプションを設定したい時は、「Stack.Navigatorコンポーネント」に、特定のスクリーンにオプションを設定したい時は、「Stack.Screenコンポーネント」のoptionsに設定する。
また、もっと細かく設定したいと言う方は、下記のドキュメントを参照してください。
公式ドキュメント: createStackNavigator
component/HomeScreen.js
|
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 |
import React from 'react'; import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'; export default class HomeScreen extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.font}>HomeScreen</Text> <TouchableOpacity onPress={()=>{this.props.navigation.navigate('SecondScreen')}}> <Text style={styles.button}>SecondScreen</Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, font: { fontSize: 24, }, button: { fontSize: 24, marginTop: 20, color: "hsla(210, 90%, 50%, 0.8)" } }) |
- デフォルト画面
- SecondScreenに画面遷移するボタンを配置しています。
component/SecondScreen.js
|
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 |
import React from 'react'; import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'; export default class SecondScreen extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.font}>SecondScreen</Text> <TouchableOpacity onPress={()=>{this.props.navigation.navigate('HomeScreen')}}> <Text style={styles.button}>navigation.navigate('HomeScreen')</Text> </TouchableOpacity> <TouchableOpacity onPress={()=>this.props.navigation.goBack()}> <Text style={styles.button}>navigation.goBack()</Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, font: { fontSize: 24, }, button: { fontSize: 20, marginTop: 20, color: "hsla(210, 90%, 50%, 0.8)" } }) |
- HomeScreenに戻るボタンを配置しています。
HomeScreenに戻る方法として、2パターンあります。
- this.props.navigation.navigate(‘HomeScreen’) 画面遷移したいページを指定する
- this.props.navigation.goBack() goBack()を使って一つ前のページに戻る
3. 参考
公式ドキュメント: createStackNavigator4. まとめ
今回「React Navigation」の”ver5.0″を紹介しました。他のバージョン(ver4.0)とは、ソースコードの書き方が異なります。特に最新verを使わないといけないと言う理由は、ないと思うので使いやすいバージョンを使ってください。個人的には、ver4.0の方が実装しやすい感じは、ありました(^^)
“【ReactNative】Stack Navigation(ver5.0)を使って画面遷移を実装” への2件のフィードバック