バージョン: 6.x

React Navigation Hello World

Web ブラウザでは、アンカー (<a>) タグを使用して、異なるページにリンクできます。ユーザーがリンクをクリックすると、URL がブラウザの履歴スタックにプッシュされます。ユーザーが戻るボタンを押すと、ブラウザは履歴スタックのトップからアイテムをポップします。そのため、アクティブなページは前に表示されていたページになります。React Native には、Web ブラウザのようなグローバル履歴スタックの組み込みの考えはありません。ここに React Navigation が登場します。

React Navigation のネイティブスタックナビゲーターは、アプリで画面間を移動し、ナビゲーション履歴を管理する方法を提供します。アプリでスタックナビゲーターを 1 つだけ使用する場合、概念的には Web ブラウザがナビゲーション状態を処理する方法と似ています。アプリは、ユーザーが操作するときにナビゲーションスタックからアイテムをプッシュおよびポップし、その結果、ユーザーは別の画面を表示できます。この仕組みが Web ブラウザと React Navigation の違いの 1 つは、React Navigation のネイティブスタックナビゲーターは、スタック内のルート間をナビゲートするときに、Android と iOS で想像されるジェスチャーとアニメーションを提供することです。

最も一般的なナビゲーターである createNativeStackNavigator を実演することから始めましょう。

ネイティブスタックナビゲーターライブラリのインストール

これまでインストールしたライブラリは、ナビゲーターの基礎と共有基盤であり、React Navigation の各ナビゲーターはそれぞれがライブラリ内にあります。ネイティブスタックナビゲーターを使用するには、@react-navigation/native-stack をインストールする必要があります。

npm
Yarn
pnpm

npm install @react-navigation/native-stack

yarn add @react-navigation/native-stack

pnpm add @react-navigation/native-stack

💡 @react-navigation/native-stack は、react-native-screens とスタートガイドでインストールした他のライブラリに依存しています。まだそれらをインストールしていない場合は、そのページにアクセスしてインストール手順に従います。

ネイティブスタックナビゲーターの作成

createNativeStackNavigator は、2 つのプロパティ、Screen と Navigator を含むオブジェクトを返す関数です。そのどちらも、ナビゲーターの設定に使用される React コンポーネントです。Navigator にはルートの構成を定義する Screen 要素が子として含まれている必要があります。

NavigationContainerはナビゲーションツリーを管理しており、ナビゲーションステートを含むコンポーネントである。このコンポーネントはすべてのナビゲーター構造をラップする必要があります。通常、このコンポーネントはアプリのルートでレンダリングされます。通常、これはApp.jsからエクスポートされるコンポーネントです。

// In App.js in a new project

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

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

const Stack = createNativeStackNavigator();

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

export default App;

Basic app using stack navigator

このコードを実行すると、ナビゲーションバーが空で、HomeScreenコンポーネント（上記に表示）を含むグレーのコンテンツ領域がある画面が表示されます。ナビゲーションバーとコンテンツ領域に表示されているスタイルは、スタックナビゲーターの既定の設定です。後ほど、それらを設定する方法について説明します。

ヒント

ルート名のケースは関係ありません。小文字のhomeでも大文字のHomeでも使用できます。ルート名は先頭が大文字にすることをお勧めします。

ナビゲーターの設定

すべてのルート設定はナビゲーターへのプロパティとして指定されます。ナビゲーターにプロパティを渡さなかったので、既定の設定を使用しています。

ネイティブスタックナビゲーターに2番目の画面を追加し、最初に表示されるHome画面を設定しましょう。

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

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

スタックにはHomeルートとDetailsルートの2つのルートがあります。ルートはScreenコンポーネントを使用して指定できます。Screenコンポーネントは、ナビゲートするために使用するルートの名前と対応するnameプロパティと、レンダリングするコンポーネントに対応するcomponentプロパティを受け入れます。

ここでは、HomeルートはHomeScreenコンポーネントに対応し、DetailsルートはDetailsScreenコンポーネントに対応します。スタックの初期ルートはHomeルートです。Detailsに変更してアプリをリロードしてみてください（React NativeのFast Refreshでは、initialRouteNameからの変更は予想通り更新されません）。Details画面が表示されると思います。それをHomeに戻して、もう一度リロードします。

警告

componentプロパティはレンダリング関数ではなく、コンポーネントを受け入れます。インライン関数（例：component={() => <HomeScreen />}）を渡さないでください。そうしないと、親コンポーネントが再レンダリングされたときにコンポーネントがアンマウントされて再マウントされ、すべての状態が失われます。追加のプロパティを渡すで代替手段を参照してください。

オプションの指定

ナビゲーター内の各画面は、ヘッダーにレンダリングされるタイトルなど、ナビゲーター用のオプションをいくつか指定できます。これらのオプションは、各画面コンポーネントのoptionsプロパティで渡すことができます。

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

ナビゲーター内のすべての画面に同じオプションを指定したい場合があります。その場合は、screenOptionsプロパティをナビゲーターに渡すことができます。

追加のプロパティの読み込み

場合によっては画面に追加のプロパティを読み込みたいこともあります。それには次の2つのアプローチで行えます。

画面のレンダリングコールバックを使用して component プロパティを指定します。

<Stack.Screen name="Home">
  {(props) => <HomeScreen {...props} extraData={someData} />}
</Stack.Screen>

警告

デフォルトでは、React Navigation が画面コンポーネントに最適化を適用し、不要なレンダリングを防ぎます。レンダリングコールバックを使用すると、それらの最適化は削除されます。そのため、レンダリングコールバックを使用する場合は、React.memo または React.PureComponent を画面コンポーネントに使用して、パフォーマンスの問題を回避する必要があります。

次の内容

この段階で当然生じる疑問は、「Home ルートから Details ルートにはどのように移動すればよいか。」です。これについては次のセクションで取り上げます。

概要

React Native には Web ブラウザのようなナビゲーションに使用できる組み込みの API がありません。React Navigation はこれに加えて、画面間の遷移に iOS および Android のジェスチャーとアニメーションを提供します。
Stack.Navigator は、ルートの構成を子要素として受け取り、構成に関する追加のプロパティを追加して、コンテンツをレンダリングするコンポーネントです。
各 Stack.Screen コンポーネントは、ルートの名前を参照する name プロパティと、ルートでレンダリングするコンポーネントを指定する component プロパティを受け取ります。これらは2つの必須プロパティです。
スタックの初期ルートを指定するには、プロパティとしてナビゲーターに initialRouteName を指定します。
画面固有のオプションを指定するには options プロパティを Stack.Screen に渡すことができ、共通オプションについては screenOptions を Stack.Navigator に渡すことができます。

ネイティブスタックナビゲーターライブラリのインストール​

ネイティブスタックナビゲーターの作成​

ナビゲーターの設定​

オプションの指定​

追加のプロパティの読み込み​

次の内容​

概要​