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

用語集

注記

これはドキュメントの新しいセクションであり、多くの用語が欠けています! 説明が必要と思われる用語については、プルリクエストまたはissueを提出してください。

Navigator は、定義した画面をどのようにレンダリングするかを決定する React コンポーネントです。 画面の設定を定義するために、子要素として Screen 要素を含みます。

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

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

ルーター​

ルーターは、ナビゲーターでのアクションと状態の変化をどのように処理するかを決定する関数の集まりです (Redux アプリのリデューサーに似ています)。通常、カスタムナビゲーターを作成する場合を除き、ルーターと直接やり取りする必要はありません。

画面コンポーネント​

画面コンポーネントは、ルート構成で使用するコンポーネントです。

const Stack = createNativeStackNavigator();

const StackNavigator = (
  <Stack.Navigator>
    <Stack.Screen
      name="Home"
      component={HomeScreen} // <----
    />
    <Stack.Screen
      name="Details"
      component={DetailsScreen} // <----
    />
  </Stack.Navigator>
);

コンポーネント名に接尾辞 Screen を付けることは完全に任意ですが、よく使用される慣例です。 Michael と呼んでも、同じように機能します。

前に、画面コンポーネントに navigation プロパティが提供されていることを確認しました。 _これは、画面がReact Navigationによってルートとしてレンダリングされた場合のみ発生することに注意することが重要です_ (たとえば、navigation.navigate に応答して)。たとえば、DetailsScreen を HomeScreen の子としてレンダリングする場合、DetailsScreen には navigation プロパティは提供されません。ホーム画面の「詳細へ...もう一度」ボタンを押すと、アプリは典型的な JavaScript 例外「undefined はオブジェクトではありません」をスローします。

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
      <DetailsScreen />
    </View>
  );
}

「ナビゲーションプロップのリファレンス」セクションでは、これについてさらに詳しく説明し、回避策について説明し、navigation プロップで使用可能なその他のプロパティに関する詳細情報を提供します。

このプロパティはすべての画面に渡され、以下に使用できます。

  • dispatch は、アクションをルーターに送信します。
  • navigate、goBack などは、アクションを便利な方法でディスパッチするために使用できます。

ナビゲーターは、ナビゲーションプロップを受け入れることもでき、親ナビゲーターがある場合は、そこから取得する必要があります。

詳細については、「ナビゲーションプロップドキュメント」を参照してください。

「ルートプロップのリファレンス」セクションでは、これについてさらに詳しく説明し、回避策について説明し、route プロップで使用可能なその他のプロパティに関する詳細情報を提供します。

ルートプロップ​

このプロパティはすべての画面に渡されます。現在のルート (つまり、params、key、name) に関する情報が含まれています。

ナビゲーターの状態は、通常、次のようになります。

{
  key: 'StackRouterRoot',
  index: 1,
  routes: [
    { key: 'A', name: 'Home' },
    { key: 'B', name: 'Profile' },
  ]
}

このナビゲーション状態では、2つのルートがあります（タブまたはスタック内のカードの可能性があります）。 インデックスはアクティブなルートを示し、これは「B」です。

ナビゲーション状態の詳細については、こちらをご覧ください。

ルート​

各ルートは、それを識別するためのキーと、ルートの種類を指定するための「name」を含むオブジェクトです。 任意のパラメーターを含めることもできます。

{
  key: 'B',
  name: 'Profile',
  params: { id: '123' }
}

ナビゲーションヘッダー、ナビゲーションバー、アプリバー、その他多くの名称でも知られています。これは、画面の上部にある、戻るボタンと画面のタイトルを含む長方形です。長方形全体は、React Navigation ではヘッダーと呼ばれることがよくあります。