スクリーン間のナビゲーション

モバイルアプリが単一の画面で構成されることは稀です。複数の画面の表示と画面間の遷移の管理は、一般的にナビゲーターとして知られるものによって処理されます。

このガイドでは、React Nativeで利用可能な様々なナビゲーションコンポーネントについて説明します。ナビゲーションをこれから始める方は、おそらくReact Navigationを使用することになるでしょう。React Navigationは、AndroidとiOSの両方で一般的なスタックナビゲーションやタブ付きナビゲーションのパターンを実装できる、わかりやすいナビゲーションソリューションを提供します。

すでにネイティブでナビゲーションを管理しているアプリにReact Nativeを統合する場合や、React Navigationの代替を探している場合は、次のライブラリが両プラットフォームでネイティブナビゲーションを提供します: react-native-navigation。

コミュニティによるナビゲーションソリューションは、開発者が数行のコードでアプリの画面を設定できるようにするスタンドアロンのライブラリです。

スターターテンプレート

新しいプロジェクトを開始する場合、React Navigationテンプレートを使用すると、Expoを使って新しいプロジェクトを素早くセットアップできます。

shell
npx create-expo-app@latest --template react-navigation/template

開始方法の詳細については、プロジェクトの`README.md`を参照してください。

インストールとセットアップ

まず、プロジェクトにそれらをインストールする必要があります。

shell
npm install @react-navigation/native @react-navigation/native-stack

次に、必要なピア依存関係をインストールします。プロジェクトがExpoマネージドプロジェクトか、ベアReact Nativeプロジェクトかによって、実行するコマンドが異なります。

Expoマネージドプロジェクトの場合は、`expo`で依存関係をインストールします。
shell
```
npx expo install react-native-screens react-native-safe-area-context
```
ベアReact Nativeプロジェクトの場合は、`npm`で依存関係をインストールします。
shell
```
npm install react-native-screens react-native-safe-area-context
```
ベアReact NativeプロジェクトでiOSを使用する場合、CocoaPodsがインストールされていることを確認してください。次に、podをインストールしてインストールを完了します。
shell
```
cd ios
pod install
cd ..
```

依存関係をインストールして設定したら、プロジェクトでReact Navigationを使用するためのセットアップに進むことができます。

React Navigationを使用する場合、アプリ内でナビゲーターを設定します。ナビゲーターは、アプリ内の画面間の遷移を処理し、ヘッダーやタブバーなどのUIを提供します。

これで、デバイス/シミュレーターでアプリをビルドして実行する準備が整いました。

使用方法

これで、ホーム画面とプロフィール画面を持つアプリを作成できます。

tsx
import * as React from 'react';
import {createStaticNavigation} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

const RootStack = createNativeStackNavigator({
  screens: {
    Home: {
      screen: HomeScreen,
      options: {title: 'Welcome'},
    },
    Profile: {
      screen: ProfileScreen,
    },
  },
});

const Navigation = createStaticNavigation(RootStack);

export default function App() {
  return <Navigation />;
}

この例では、`RootStack`は2つの画面（`Home`と`Profile`）を持つナビゲーターで、`createNativeStackNavigator`の`screens`プロパティで定義されています。同様に、好きなだけ画面を定義できます。

各画面の`options`プロパティで、画面のタイトルなどのオプションを指定できます。各画面定義には、Reactコンポーネントまたは別のナビゲーターである`screen`プロパティも必要です。

各画面コンポーネント内で、`useNavigation`フックを使用して`navigation`オブジェクトを取得できます。これには他の画面にリンクするためのさまざまなメソッドがあります。たとえば、`navigation.navigate`を使用して`Profile`画面に移動できます。

tsx
import {useNavigation} from '@react-navigation/native';

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

  return (
    <Button
      title="Go to Jane's profile"
      onPress={() =>
        navigation.navigate('Profile', {name: 'Jane'})
      }
    />
  );
}

function ProfileScreen({route}) {
  return <Text>This is {route.params.name}'s profile</Text>;
}

この`native-stack`ナビゲーターは、ネイティブAPI（iOSでは`UINavigationController`、Androidでは`Fragment`）を使用しているため、`createNativeStackNavigator`で構築されたナビゲーションは、これらのAPI上にネイティブで構築されたアプリと同じように動作し、同様のパフォーマンス特性を持ちます。

React Navigationには、タブやドロワーなど、さまざまな種類のナビゲーター用のパッケージもあります。これらを使用して、アプリにさまざまなパターンを実装できます。

React Navigationの完全な入門については、React Navigation入門ガイドに従ってください。

React Navigation​

スターターテンプレート​

インストールとセットアップ​

使用方法​

React Navigation

スターターテンプレート

インストールとセットアップ

使用方法