画面間のナビゲーション

モバイルアプリが単一の画面で構成されることはほとんどありません。複数の画面の表示と画面間の遷移の管理は、通常、ナビゲーターと呼ばれるものによって処理されます。

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

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

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

インストールと設定

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

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

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

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

注意

インストール後、ピア依存関係に関連する警告が表示される場合があります。これらは通常、一部のパッケージで指定されたバージョンの範囲が正しくないことが原因です。アプリがビルドされる限り、ほとんどの警告は安全に無視できます。

次に、アプリ全体を NavigationContainer でラップする必要があります。通常は、index.js や App.js などのエントリファイルでこれを行います。

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';

const App = () => {
  return (
    <NavigationContainer>
      {/* Rest of your app code */}
    </NavigationContainer>
  );
};

export default App;

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

使用法

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

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

const Stack = createNativeStackNavigator();

const MyStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{title: 'Welcome'}}
        />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

この例では、Stack.Screen コンポーネントを使用して定義された 2 つの画面 (Home と Profile) があります。同様に、必要なだけ多くの画面を定義できます。

Stack.Screen の options プロパティで、各画面の画面タイトルなどのオプションを設定できます。

各画面は、React コンポーネントである component プロパティを受け取ります。これらのコンポーネントは、他の画面にリンクするためのさまざまなメソッドを持つ navigation というプロパティを受け取ります。たとえば、navigation.navigate を使用して Profile 画面に移動できます

const HomeScreen = ({navigation}) => {
  return (
    <Button
      title="Go to Jane's profile"
      onPress={() =>
        navigation.navigate('Profile', {name: 'Jane'})
      }
    />
  );
};
const ProfileScreen = ({navigation, 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 Getting Started Guide に従ってください。

React Navigation​

インストールと設定​

使用法​

React Navigation

インストールと設定

使用法