こんにちは！C.Cです！
今回はEXPOでページ間の移動機能を追加するなら必ずお世話になるReact Navigation ライブラリのインストールから画面間の移動機能を設置するところまでを解説します。
動画解説もありますので是非見ていってください！
・EXPOにReact Navigationをインストールして依存関係を構築できる
・Native Stack Navigator ライブラリを使用しページ移動機能を管理する方法を準備できる
・ページ間移動の機能を設置できる
もくじ
執筆時点（2023年12月14日）での実行環境
"dependencies": {
"@react-navigation/native": "^6.1.9",
"@react-navigation/native-stack": "^6.9.17",
"expo": "~49.0.15",
"expo-status-bar": "~1.6.0",
"react": "18.2.0",
"react-native": "0.72.6",
"react-native-safe-area-context": "4.6.3",
"react-native-screens": "~3.22.0"
},
"devDependencies": {
"@babel/core": "^7.20.0"
},Githubサンプル
https://github.com/CC-camp/demo-app/tree/d6608566a31678600bd9bd0db514a8caf7e74483
インストール
ここからはEXPOプロジェクトに必要なパッケージをインストールしていきます。
npm install @react-navigation/nativeyarn add @react-navigation/nativeEXPO 管理プロジェクトへ依存関係のインストール
プロジェクトのディレクトリで次のコマンドを実行します。
npx expo install react-native-screens react-native-safe-area-contextNative Stack Navigatorは、アプリがページ間を遷移し移動の履歴を管理する方法を提供してくれます。
npm install @react-navigation/native-stackyarn add @react-navigation/native-stackアプリの階層
- App
- .expo
- assets
- node_modules
- src
- components
- navigation ← React Navigation全般を管理するフォルダを作成
- AppNavigator.js ← Navigation Containerを管理するファイル
- HomeStackNavigator.js ← Native Stack Navigatorを管理するファイル
- screens
- HomeScreen.js
- SettingScreen.js
- LoginScreen.js
- ...
- App.js ← Appnavigator.jsを実行する
- app.json
- babel.config.js
- package.json
- README.md
- yarn.lock
createNativeStackNavigatorはScreenとNavigatorの2つのプロパティを含みます。
ルートの構成を定義するために、Screen要素をNavigatorで挟む必要があります。
Stack.NavigatorのpropとしてinitialRouteNameで最初にレンダリングしたいScreenを指定します。
import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
// screens
import HomeScreen from "../screens/HomeScreen";
import SettingScreen from "../screens/SettingScreen";
import LoginScreen from "../screens/LoginScreen";
const Stack = createNativeStackNavigator();
export default function HomeStackNavigator() {
return (
<Stack.Navigator
initialRouteName="Home"
>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Setting" component={SettingScreen} />
<Stack.Screen name="Login" component={LoginScreen} />
</Stack.Navigator>
);
}
NavigationContainerはナビゲーションツリーを管理するコンポーネントです。
先ほど作成したHomeStackNavigatorをNavigationContainerで挟みます。
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import HomeStackNavigator from "./HomeStackNavigator";
export default function AppNavigator() {
return (
<NavigationContainer>
<HomeStackNavigator />
</NavigationContainer>
);
}import AppNavigator from "./src/navigation/AppNavigator";
export default function App() {
return <AppNavigator />;
}画面間を移動する
新しいページに移動する
ページを移動するにはnavigation.navigate()を使用します。引数にはNative Stack Navigatorで作成した、Stack.Screenのname prop を入れます。
例）HomeScreenに移動したい場合 → navigation.navigate('Home')
import { StyleSheet, Text, View, Button } from "react-native";
export default function HomeScreen({ navigation }) {
return (
<View style={styles.container}>
<Text>Home Screen</Text>
<Button
title="Go to Setting"
onPress={() => navigation.navigate("Setting")}
/>
<Button
title="Go to Login"
onPress={() => navigation.navigate("Login")}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
前のページに戻る
直前のページに戻る場合にはnavigation.navigate()で直前のページを指定しても良いですが、
一般的にはnavigation.goBack()を使用します。
import { StyleSheet, Text, View, Button } from "react-native";
export default function SettingScreen({ navigation }) {
return (
<View style={styles.container}>
<Text>Setting Screen</Text>
<Button title="Go to Home" onPress={() => navigation.navigate("Home")} />
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
}同じページを何度も呼び出す
使い道は多くはないかもしれませんが、同じページを何度も読み込んでナビゲーション履歴に追加していくことができます。
その場合はnavigation.push()を使用します。
import { StyleSheet, Text, View, Button } from "react-native";
export default function LoginScreen({ navigation }) {
return (
<View style={styles.container}>
<Text>Login Screen</Text>
<Button
title="Go to Login ...again"
onPress={() => navigation.push("Login")}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
最後に
今回はReact Navigationのインストールから簡単なページの移動までを解説しました。
EXPOでアプリ開発をしてる場合には必ず使う機能だと思います。
