サイトアイコン CCcamp

EXPO で React Navigation の始め方（インストール〜画面間の移動）

C.C
EXPO-React-Navigation インストール 画面間の移動

こんにちは！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/native
yarn add @react-navigation/native

EXPO 管理プロジェクトへ依存関係のインストール

プロジェクトのディレクトリで次のコマンドを実行します。

npx expo install react-native-screens react-native-safe-area-context

Native Stack Navigator ライブラリのインストール

Native Stack Navigatorは、アプリがページ間を遷移し移動の履歴を管理する方法を提供してくれます。

npm install @react-navigation/native-stack
yarn add @react-navigation/native-stack

アプリの階層

React Navigationを準備する

Native Stack Navigator を作成する

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>
  );
}

Navigation Container を作成する

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>
  );
}

App.jsにNavigation Containerコンポーネントを設置する

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でアプリ開発をしてる場合には必ず使う機能だと思います。

参考記事

React Navigation ドキュメント

モバイルバージョンを終了