React Navigationで画面遷移を実現する

基礎からはじめるReact Native入門 第9回

Stack Navigatorで基本の画面遷移を扱う

　ボタンを押すと新しい画面が開く、左上のボタンを押すと戻る、といった「普通の」画面遷移を扱うのがStack Navigatorです。 @react-navigation/stackをインストールすることで利用できるようになります（リスト5）。

［リスト5］Stack Navigatorをインストールする

$ npm install @react-navigation/stack

　まずは、画面を1つだけ定義してみましょう。画面に見立てたHomeScreenコンポーネントを用意して、Stack Navigatorにセットします（リスト6）。

［リスト6］App.js

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
      }}
    >
      <Text>Home Screen</Text>
    </View>
  );
}

// (1) StackNavigatorを生成する
const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        {/* (2) StackNavigator用の画面を定義する */}
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

　まずは（1）のようにcreateStackNavigator()関数でStackオブジェクトを生成します。画面の定義は（2）のようにStack.Screenコンポーネントで行い、 Stack.Navigatorで囲みます。実行すると図4の通りになります。

図4：実行結果

　HomeScreenが表示されましたね。デフォルトでname属性がヘッダーのタイトルとして表示されています。

画面遷移する

　それではそろそろ本題に入りましょう。2つ目の画面を用意し、画面遷移をしてみます（リスト7）。

［リスト7］App.js

import 'react-native-gesture-handler';
import React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { useNavigation } from '@react-navigation/native';

function HomeScreen() {
  const navigation = useNavigation(); // (2)

  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
      }}
    >
      <Text>Home Screen</Text>
      <Button
        title="詳細へ"
        onPress={() => navigation.navigate('Detail')} />{/* (3) */}
    </View>
  );
}

function DetailScreen() {
  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
      }}
    >
      <Text>Detail Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">{/* (1) */}
        <Stack.Screen
          name="Home"
          component={HomeScreen} />
        <Stack.Screen
          name="Detail"
          component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

　DetailScreenを追加しました。複数のスクリーンがある場合には、（1）のように initialRouteName属性を設定して、どのスクリーンを初期表示に使うのかを明示します。

　画面間を移動する場合は、まず（2）のようにuseNavigation()フックを使って、 navigationオブジェクトを取り出します。次に、任意のタイミングで（3）の navigation.navigate()関数を実行することで、画面遷移が発生します（図5）。今回はボタンで実装しましたが、任意のタイミングで構いません。

図5：画面遷移する

　戻るボタンは自動で現れるので、単純な画面遷移であれば何も設定する必要はありません。

図6：戻るボタン（iOS）

図7：戻るボタン（Android）

　このように、画面を行ったり来たりするだけであれば、簡単に実装できます。

タイトルを変更する

　タイトルを変更したい場合は、options属性でリスト8のように指定しましょう。

［リスト8］タイトルを変更する

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{ title: 'ホーム' }} />

　すると、図8の通りタイトルが変わります。

図8：タイトルを変更した

　日本語のタイトルをつけたい場合は、この機能を使うと良いでしょう。