ReactNativeでnavigationを使ってみる

概要

• ReactNativeを使って画面遷移の実装をしてみる

実際の完成物

環境

• MacBookAir（intel）/ MacBookPro（M1Pro）
• OS：Monterey（12.0.1）
• VSCode
• Xcode
• npm：8.3.1
• yarn：1.22.17
• expo：5.2.0

手順1

まずはexpoコマンドを使ってプロジェクトを作り、作ったプロジェクトに移動します。

% expo init [アプリ名]

上記のコマンド実行後はテンプレートを選択しますが、ここでは一番上のblankを選択します。

% cd [アプリ名]

アプリが起動できるか試します。

% npm start
// もしくは
% yarn start

アプリが起動できれば無事手順1は完了です。

手順2

React Navigatorの設定

react-navigation/nativeのインストール

% npm install @react-navigation/native

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

% npm install @react-navigation/native-stack

無事インストールができたら手順2は完了です。

手順3

必要なフォルダとファイルを作る

まずはHomeScreenフォルダを作り、その中にHomeScreen.jsを作成します。
UserScreenも同様に作成します。

手順4

ホーム画面とユーザー画面の作成

HomeScreen.jsとUserScreen.jsの中身を以下のように記述します。

HomeScreen.js

import React from "react";
import { StyleSheet, View, Text } from "react-native";

const HomeScreen = () => {
  return (
    <View style={styles.container}>
      <Text>ホーム画面</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});
export default HomeScreen;

UserScreen.js

import React from "react";
import { StyleSheet, View, Text } from "react-native";

const UserScreen = () => {
  return (
    <View style={styles.container}>
      <Text>ユーザ画面</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

export default UserScreen;

手順5

App.jsに先程作ったHomeScreen.jsとUserScreenを読み込む

またこの段階でApp.jsにreact-navigation/nativeからimportするNavigationContainerを使えるように記述をしましょう。

同様にcreateNativeStackNavigatorも利用できるようにimportしておきましょう。

App.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import HomeScreen from "./HomeScreen/HomeScreen";
import UserScreen from "./UserScreen/UserScreen";

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="User" component={UserScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

ここまでできれば、ひとまず以下のようになっているはずです。

ただし、この状態では画面遷移することはできません。
そこでStack.Navigatorコンポーネントに対してinitialRouteNameを設定することで、
最初に表示する画面を指定できます。
今回はホーム画面を最初の画面に設定したいので、
initialRouteNameにHomeを指定します。

手順6

HomeScreen.jsにボタンを追加する

ホーム画面からユーザー画面に繊維するためのボタンを追加します。

HomeScreen.js

import React from "react";
import { StyleSheet, View, Text, Button } from "react-native";

const HomeScreen = () => {
  return (
    <View style={styles.container}>
      <Text>ホーム画面</Text>
      <Button title="ユーザ画面に繊維する" />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});
export default HomeScreen;

ただしボタンを追加してもまだ画面は繊維しません。

ここでユーザー画面に繊維できるように設定をしていきます。
設定する前にまずはStack.Screenの設定したコンポーネントに渡されるpropsを確認します。

HomeScreen.js

import React from "react";
import { StyleSheet, View, Text, Button } from "react-native";

const HomeScreen = (props) => {
  console.log(props)
  return (
    <View style={styles.container}>
      <Text>ホーム画面</Text>
      <Button title="ユーザ画面に繊維する" />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});
export default HomeScreen;

コンソールに表示されたpropsを確認するとオブジェクトの中にnavigationオブジェクトが確認できます。

実際にnavigationオブジェクトを設定してみます。

HomeScreen.js

import React from "react";
import { StyleSheet, View, Text, Button } from "react-native";

const HomeScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text>ホーム画面</Text>
      <Button
        title="ユーザ画面に繊維する"
        onPress={() => navigation.navigate("User")}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});
export default HomeScreen;

onPressイベントにボタンをタップするとユーザー画面に繊維するように設定することで、ユーザー画面に繊維できることが確認できたと思います。

お疲れ様でした！