メインコンテンツへスキップ
バージョン: 6.x

はじめに

このドキュメントの「基本」セクションでは、React Navigation の最も重要な側面を解説します。一般的な小規模モバイルアプリケーションを構築する方法を理解するのに十分な情報を提供し、React Navigation のより高度な部分を深く掘り下げるために必要な基礎知識を身につけることができるでしょう。

前提条件​

すでに JavaScript、React、React Native に精通している場合は、React Navigation をすぐに使い始めることができるでしょう。そうでない場合は、まず基本的な知識を習得してからここに戻ってくることを強くお勧めします。

役立つリソースをいくつか紹介します。

  1. React Native Express (セクション 1 ～ 4)
  2. React の主な概念
  3. React Hooks
  4. React Context (高度)

最小要件​

  • react-native >= 0.63.0
  • expo >= 41 ( Expo を使用する場合)
  • typescript >= 4.1.0 ( TypeScript を使用する場合)

インストール​

React Native プロジェクトに必要なパッケージをインストールします

npm install @react-navigation/native

React Navigation は、いくつかのコアユーティリティで構成されており、それらがナビゲーターによって使用され、アプリのナビゲーション構造が作成されます。今はこれについてあまり心配しないでください。すぐに理解できるようになります！インストール作業を事前に済ませておきましょう。ほとんどのナビゲーターで使用される依存関係もインストールして設定し、その後、コードを書き始めることができます。

ここでインストールするライブラリは、react-native-screens と react-native-safe-area-context です。これらのライブラリがすでにインストールされており、最新バージョンである場合は、ここで完了です！そうでない場合は、読み進めてください。

Expo 管理プロジェクトへの依存関係のインストール​

プロジェクトディレクトリで、以下を実行します。

npx expo install react-native-screens react-native-safe-area-context

これにより、互換性のあるこれらのライブラリのバージョンがインストールされます。

これで、"React Navigation を使ってみる" に進んで、コードを書き始めることができます。

ベア React Native プロジェクトへの依存関係のインストール​

プロジェクトディレクトリで、以下を実行します。

npm install react-native-screens react-native-safe-area-context
注意

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

React Native 0.60 以降では、リンクが自動化されています。したがって、react-native link を実行する必要はありません。

Mac を使用していて iOS 向けに開発している場合は、( Cocoapods を介して) ポッドをインストールしてリンクを完了する必要があります。

npx pod-install ios

react-native-screens パッケージは、Android デバイスで正しく動作させるために追加の設定手順が必要です。android/app/src/main/java/<パッケージ名>/ の下にある MainActivity.kt または MainActivity.java ファイルを編集します。

強調表示されたコードを MainActivity クラスの本体に追加します

class MainActivity: ReactActivity() {
  // ...
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(null)
  }
  // ...
}

また、このファイルの先頭、パッケージステートメントの下に、次のインポートステートメントを追加してください。

import android.os.Bundle;

この変更は、Activity の再起動時に View の状態が一貫して保持されないことに関連するクラッシュを回避するために必要です。

情報

ナビゲーター (スタックナビゲーターなど) を使用する場合は、追加の依存関係について、そのナビゲーターのインストール手順に従う必要があります。「モジュールを解決できません」というエラーが表示された場合は、プロジェクトにそのモジュールをインストールする必要があります。

アプリを NavigationContainer でラップする​

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

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

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}
警告

一般的な React Native アプリでは、NavigationContainer はアプリのルートで 1 回だけ使用する必要があります。特別なユースケースがない限り、複数の NavigationContainer をネストすべきではありません。

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

"React Navigation を使ってみる" に進んで、コードを書き始めてください。