React Nativeで画面遷移（ナビゲーション）を実装する方法を徹底解説

アプリ開発を進めていると、ある画面から別の画面へ切り替える場面が頻繁に発生します。このような画面遷移はReact Navigationを使うことで簡単に実装できます。本記事では、React Nativeでホーム画面からアバウト画面へ遷移させる基本的なナビゲーションの実装手順を、コード例とともにわかりやすく解説します。

1. 必要なパッケージのインストール

まず、ナビゲーション機能を実装するために、以下のパッケージをインストールします。

npm install @react-navigation/native @react-navigation/stack
npm install @react-native-community/masked-view react-native-screens react-native-safe-area-context react-native-gesture-handler

インストールが完了したら、次のステップであるナビゲーションのセットアップに進みましょう。

2. ページファイルの作成

プロジェクト内に pages/ フォルダを作成し、その中に HomePage.js と AboutPage.js の2つのファイルを作成します。

pages/HomePage.js

ホーム画面には「Click Here」というタイトルのボタンを表示します。ボタンが押されると、ユーザーはAboutPage画面へ遷移します。navigation.navigate() の第一引数に遷移先の画面名、第二引数に渡したいパラメータを指定することで画面移動が可能です。

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

const HomeScreen = ({ navigation }) => {
    return (
        <Button title="Click Here" onPress={() => navigation.navigate('About', { name: 'About Page' })} />
    );
};
export default HomeScreen;

pages/AboutPage.js

アバウト画面では、以下のようにテキストを表示するだけのシンプルな構成にしています。

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

const AboutPage = () => {
    return <Text>You have reached inside About Page!</Text>;
};
export default AboutPage;

3. App.jsでナビゲーションを設定する

続いて、作成したページをApp.jsで読み込みます。ページの呼び出しは以下のように行います。

import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';

さらに、@react-navigation/native からナビゲーション全体のコンテナとなる NavigationContainer を、@react-navigation/stack から createStackNavigator をそれぞれインポートします。

次に、以下のように createStackNavigator() を呼び出してスタックを作成します。

const Stack = createStackNavigator();

<Stack.Navigator> を親コンテナとして、各画面を <Stack.Screen> で登録していきます。Stack Navigatorは、新しい画面をスタックの一番上に積み重ねていく形で画面間の遷移を管理する仕組みです。

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Home" component={HomePage} options={{ title: 'From home page : Navigation' }} />
    <Stack.Screen name="About" component={AboutPage} />
  </Stack.Navigator>
</NavigationContainer>

ホーム画面用のスタックは以下のように定義します。

<Stack.Screen name="Home" component={HomePage} options={{ title: 'From home page : Navigation' }} />

アバウト画面用のスタックは以下のように定義します。

<Stack.Screen name="About" component={AboutPage} />

name プロパティには画面を識別するための一意な名前を指定し、component プロパティには表示するコンポーネントを指定します。また、options を使えばヘッダーのタイトルなどもカスタマイズできます。

4. 完全なコード

以下は、React Nativeで画面遷移を実現するための完全なコードです。

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';

const Stack = createStackNavigator();

const MyStack = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Home" component={HomePage} options={{ title: 'From home page : Navigation' }} />
                <Stack.Screen name="About" component={AboutPage} />
            </Stack.Navigator>
        </NavigationContainer>
    );
};
export default MyStack;

まとめ

React NavigationのStack Navigatorを利用すれば、React Nativeアプリにおける画面遷移をシンプルかつ柔軟に実装できます。NavigationContainer で全体を包み、Stack.Screen で各画面を登録するだけという手軽さが魅力です。また、スタック型のナビゲーションでは前の画面への戻る操作も自動的にサポートされるため、直感的なユーザー体験を提供できます。まずは本記事のコードを参考に、実際に画面遷移を試してみてください。