react-navigationで画面遷移をする【ReactNative+expo】

はじめに

初めましてTutuと申します。
最近react-nativeの勉強を始めました。
その中でreact-navigation(5系)を使う機会があったので備忘録として残しておきたいと思います。

準備

react-navitaionをインストール
npm install @react-navigation/native

react-navigation-stackをインストール
npm install @react-navigation/stack

依存ライブラリをインストール(expoを使用)
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

環境

react-navigation-native ： 5.8.9
react-navigation-stack : 5.12.6

実装

遷移の設定

CreateStackNavigatorで遷移先登録のための初期化処理をします。(おまじないみたいなものなので気にしないで大丈夫です。)

初期化

const Stack = createStackNavigator();

ここで遷移先の登録と初期条件などを設定します。（今回はfunctionComponentで書いています）
例えばinitialRouteNameに設定した名前が最初の画面になったり、ヘッダーの情報をデフォルトで設定しておくことができます。

※詳細は公式をご覧ください。

画面登録

const RootStack = () => {
    return (
        <Stack.Navigator
            initialRouteName="Home"　//最初の画面
            screenOptions={{
                headerStyle: {
                    backgroundColor: "#265366",
                },
                headerTintColor: "#fff",
                headerTitleStyle: {
                    fontWeight: "bold",
                },
            }}>
            <Stack.Screen name="Home" component={MemoListScreen} />
            <Stack.Screen name="MemoDetail" component={MemoDetailScreen} />
        </Stack.Navigator>
    );
};

最後にNavigationContainerでラップし、App.jsに登録することで設定したコンポーネントでreact-navigationを使うことができるようにします。

遷移画面の管理

export default function App() {
    return (
        <NavigationContainer>
            <RootStack />
        </NavigationContainer>
    );
}

App.js(全体)

import React from "react";
import {NavigationContainer} from "@react-navigation/native";
import {createStackNavigator} from "@react-navigation/stack";
import MemoDetailScreen from "./src/screens/MemoDetailScreen";
import MemoListScreen from "./src/screens/MemoListScreen";

//createStackNavigatorを初期化
const Stack = createStackNavigator();

//遷移画面の登録
const RootStack = () => {
    return (
        <Stack.Navigator
            initialRouteName="Home"　//最初の画面
            screenOptions={{
                headerStyle: {
                    backgroundColor: "#265366",
                },
                headerTintColor: "#fff",
                headerTitleStyle: {
                    fontWeight: "bold",
                },
            }}>
            <Stack.Screen name="Home" component={MemoListScreen} />
            <Stack.Screen name="MemoDetail" component={MemoDetailScreen} />
        </Stack.Navigator>
    );
};

//NavigationContainerで囲む必要があるためfunctionalコンポーネントを使用
export default function App() {
    return (
        <NavigationContainer>
            <RootStack />
        </NavigationContainer>
    );
}

遷移方法

遷移させたい処理に以下を記述することで遷移が可能になります。
（今回はボタンを押した際に遷移する処理としました。）

data.navigation.navigate("MemoDetail");　

遷移方法

import React from "react";
import {StyleSheet, View, Text} from "react-native";
import MemoList from "../components/MemoList";
import CircleButton from "../elements/CircleButton";

const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: "100%",
    },
});

const MemoListScreen = (data) => (
    <View style={styles.container}>
　　　　//別のコンポーネントにnavigationの情報を渡している(今回は関係なし)
        <MemoList navigation={data.navigation}/>　
        <CircleButton
            name="plus"
            onPress={() => {
                data.navigation.navigate("MemoDetail");　//遷移先
            }}
        />
    </View>
);

export default MemoListScreen;

最後に

今回react-navigationを実装するにあたり5系かつfunction Component(Const)を利用した情報が少なかったため、備忘録として残しておきました。
また、初学者のため間違っている等ありましたらご指摘いただけるとありがたいです。

参考文献

• 公式