【ReactNative】画面遷移機能の実装（Expo、TypeScript）

2024.04.19

UnsplashのDaiga Ellabyが撮影した写真

1 はじめに
2 動作確認した環境
3 React Navigation
4 Stackの実装
5 参考

はじめに

ReactNativeに画面遷移機能を実装するパッケージとしてReactNative公式は「React Navigation」を推しているので、この記事ではReact Navigationを使用して画面遷移機能を実装します。

参考：https://reactnative.dev/docs/navigation

動作確認した環境

OS：Windows11 Pro/WSL2(Ubuntu 22.04.4)
Node：v20.11.1
npm：10.2.4
expo：50.0.14
react：18.2.0
react-native：0.73.6
@react-navigation/native：6.1.17
@react-navigation/stack：6.3.29

React Navigation

React Navigationには５つの画面遷移機能があります。
（画面遷移時の動きなどの詳細は各リンク先ページからご確認ください）

・Stack：基本の画面遷移。特に理由が無ければNativeStackよりこっちを使う。
・Native Stack：Stackの機能の代替。Android、iOSの画面遷移機能を使う。カスタマイズ性は低いがパフォーマンスが良い
・Drawer：サイドメニューにて画面遷移
・Bottom Tabs：画面下部のメニューにて画面遷移
・Material Bottom Tabs：画面下部のメニューにて画面遷移
・Material Top Tabs：画面上部のメニューにて画面遷移

Stackの実装

手順１．パッケージのインストール

npm install @react-navigation/native @react-navigation/stack react-native-screens react-native-safe-area-context

手順２．必要なディレクトリ、ファイルの作成

以下赤字部分のディレクトリ、ファイルを作成してください。

アプリ名
　├.expo
  ├assets
  ├node_modules
　├src
　　├screens
　　　├HomeScreen.tsx  　//画面１
　　　├OtherScreen.tsx    //画面２
　　├type.tsx  　　　　　//画面遷移のための型定義
　├App.tsx
　～他は省略～

手順３．各ファイルを編集

App.tsx、type.tsx、HomeScreen.tsx、OtherScreen.tsxをそれぞれ以下のように編集してください。

【App.tsx】

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

//画面遷移用のパッケージ＆設定ファイル
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { RootStackParamList } from './src/type';    //画面遷移のためのデータ型

//画面
import HomeScreen from './src/screens/HomeScreen';  //画面１
import UserScreen from './src/screens/UserScreen';  //画面２

//画面遷移の準備
const Stack = createStackNavigator<RootStackParamList>();

export default function App(){
  return(
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} options={{title: "ホーム"}} />
        <Stack.Screen name="User" component={UserScreen} options={{title: "ユーザー"}} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

【type.tsx】

//画面遷移用の型
export type RootStackParamList = {
    Home: undefined;    //パラメータのデータ型を指定する
    User: {userId: number};
}

【HomeScreen.tsx】

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

//画面遷移に必要
import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { RootStackParamList } from '../type';

const HomeScreen: React.FC = () => {
    const navigation = useNavigation<StackNavigationProp<RootStackParamList, 'Home'>>();
    return (
        <View>
            <Text>ホーム画面</Text>
            <Button title='ユーザー' onPress={() => navigation.navigate('User', {userId: 1})} />
        </View>
    )
}

export default HomeScreen;

【UserScreen.tsx】

import React, {useState} from 'react';
import { View, Text, Button } from 'react-native';

//画面遷移に必要
import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { RootStackParamList } from '../type';

const UserScreen: React.FC = () => {
    const navigation = useNavigation<StackNavigationProp<RootStackParamList, 'User'>>();
    const route = useRoute<RouteProp<RootStackParamList, "User">>();

    const [userId, setUserId] = useState<number>(route.params.userId);

    return (
        <View>
            <Text>ユーザー画面 userId：{userId}</Text>
            <Button title='ホーム' onPress={() => navigation.navigate('Home')} />
        </View>
    )
}

export default UserScreen;