【React Native】画面移動を実装する方法｜React Navigationの例
今回は、React Nativeで開発しているアプリで画面の移動を実装する方法となります。
アプリの画面の移動にはナビゲータと呼ばれる機能で処理を行います。例では、そのナビゲータの処理を簡単に行える「React Navigation」ライブラリを利用して、画面の移動を実装します。
【React Native】React Navigationで画面移動を実装する例
今回は、次のようなHome画面とDetails画面を作成し、その画面を移動する簡単な例となります。また、React Navigationのバージョンは5.xとなります。
Home画面には「Go to Details」ボタンがあり、タップするとDetails画面に移動します。
Details画面には4つのボタンがあり、それぞれ次の機能となります。
- Go to Home（Home画面に移動）
- Go back（1つ前の画面に戻る）
- Go back to first screen in stack（最初に表示する画面に戻る）
- Go to Details... again（Details画面を追加）
実際の挙動は以下のExpo Snackで確認できます。
https://snack.expo.io/@yic666kr/-react-navigation-moving-between-screens-sample
例では、ExpoでReactNativeの開発環境を構築してある前提としています。Expoで開発環境を構築する方法については以下のリンク先を参考にしてみてください。
React Navigationをインストール
まず、プロジェクトに以下のコマンドでReact Navigationをインストールします。
npm install @react-navigation/native @react-navigation/stack次に、React Navigationが依存するパッケージを、プロジェクトに以下のコマンドでインストールします。
expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view上記のexpoコマンドでは、以下のパッケージをインストールしています。
- react-native-reanimated
- react-native-gesture-handler
- react-native-screens
- react-native-safe-area-context
- @react-native-community/masked-view
画面移動を実装するコードの例
以下、画面移動を実装するコードの例となり、App.jsファイルに記述します。
import React from 'react'
import { StyleSheet, Button, Text, View } from 'react-native'
// React Navigation Module
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
const Stack = createStackNavigator()
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={HomeScreen}
/>
<Stack.Screen
name="Details"
component={DetailsScreen}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
function HomeScreen({ navigation }) {
return (
<View style={styles.container}>
<Text style={styles.text}>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details')}
/>
</View>
)
}
function DetailsScreen({ navigation }) {
return (
<View style={styles.container}>
<Text style={styles.text}>Details Screen</Text>
<View style={styles.button_group}>
<Button
title="Go to Home"
onPress={() => navigation.navigate('Home')}
/>
<Button
title="Go back"
onPress={() => navigation.goBack()}
/>
<Button
title="Go back to first screen in stack"
onPress={() => navigation.popToTop()}
/>
<Button
title="Go to Details... again"
onPress={() => navigation.push('Details')}
/>
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
text: {
margin: 14,
fontSize: 20,
color: '#333',
},
button_group: {
justifyContent: 'space-around',
height: 300,
padding: 20,
backgroundColor: '#fff',
}
})
export default AppReact Nativeのコードの説明
以下、React Nativeのコードのポイントとなる箇所の説明となります。
モジュールからインポート
コードの1行目からの箇所では、次のようにモジュールから利用するコンポーネントなどをインポートしています。
import React from 'react'
import { StyleSheet, Button, Text, View } from 'react-native'
// React Navigation Module
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'React Navigationで管理する画面を定義
コードの9行目からの箇所では、次のようにApp関数で、React Navigationを利用して管理する画面を定義しています。
const Stack = createStackNavigator()
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={HomeScreen}
/>
<Stack.Screen
name="Details"
component={DetailsScreen}
/>
</Stack.Navigator>
</NavigationContainer>
)
}NavigationContainerコンポーネントについて
React Navigationを利用するには、すべてのナビゲータの構造をNavigationContainerコンポーネントで囲みます。通常は上記のようにアプリのルートとなるApp.jsでレンダリングします。
createStackNavigatorのNavigator・Screenコンポーネントについて
React Navigationには、いくつかのナビゲータがありますが、今回は、画面が重なるように移動する基本的なcreateStackNavigatorを利用してナビゲータの構造を定義します。
createStackNavigatorはNavigator・Screenコンポーネントを返す関数となり、Screenコンポーネントで画面を定義して、すべてのScreenコンポーネントをNavigatorコンポーネントで囲みます。
Screenコンポーネントの必須propsはnameとcomponentとなり、nameには画面の名前、componentには作成した画面のコンポーネントを指定します。
NavigatorコンポーネントのpropsのinitialRouteNameには、 ナビゲータで最初に表示する画面の名前を指定します。
Home画面のコンポーネントを作成
コードの32行目からの箇所では、次のようにHomeScreen関数を定義して、Home画面のコンポーネントを作成しています。
function HomeScreen({ navigation }) {
return (
<View style={styles.container}>
<Text style={styles.text}>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details')}
/>
</View>
)
}Screenコンポーネントで定義した画面のコンポーネントでは、画面移動などを扱えるnavigationのオブジェクトを利用できます。
HomeScreen関数では、 ButtonコンポーネントのonPressの値に関数を指定し、その関数の戻り値にnavigation.navigateメソッドを指定します。メソッドの引数には移動する画面の名前を指定します。
それにより、Home画面の「Go to Details」ボタンをタップするとDetails画面に移動します。
Details画面のコンポーネントを作成
コードの32行目からの箇所では、次のようにDetailsScreen関数を定義して、Details画面のコンポーネントを作成しています。
function DetailsScreen({ navigation }) {
return (
<View style={styles.container}>
<Text style={styles.text}>Details Screen</Text>
<View style={styles.button_group}>
<Button
title="Go to Home"
onPress={() => navigation.navigate('Home')}
/>
<Button
title="Go back"
onPress={() => navigation.goBack()}
/>
<Button
title="Go back to first screen in stack"
onPress={() => navigation.popToTop()}
/>
<Button
title="Go to Details... again"
onPress={() => navigation.push('Details')}
/>
</View>
</View>
)
}DetailsScreen関数では、 4つのButtonコンポーネントを作成し、それぞれのonPressの値に関数を指定し、その関数の戻り値に次のメソッドを指定しています。
| メソッド | 機能 |
| navigation.navigate('Home') | メソッドの引数に指定した画面に移動 |
| navigation.goBack() | 前の画面に戻る |
| navigation.popToTop() | ナビゲータで最初に表示する画面に戻る |
| navigation.push('Details') | メソッドの引数に指定した画面を追加 |
それにより、Details画面のそれぞれのボタンをタップすると、それぞれ指定した画面移動を行います。
まとめ
React Navigationには、さまざまな設定オプションや、タブメニュー・Drawerメニュー（スライドするメニュー）を利用した画面移動も利用できます。
React Navigationの詳細な利用方法については、文末の参考サイト内を確認しみてください。