反応ナビゲーション

Webブラウザでは、アンカーを使用して別のページにリンクできます<a> ) タグ.ユーザーがリンクをクリックすると、URLがブラウザの履歴スタックにプッシュされます.ユーザーが[戻る]ボタンを押すと、ブラウザは履歴スタックの上部から項目をポップしますので、アクティブなページは以前に訪れたページです.ネイティブの反応は、Webブラウザのようなグローバルな歴史スタックの組み込みのアイデアを持っていない-これは反応ナビゲーションが物語に入るところです.
反応ナビゲーションのネイティブスタックナビゲータは、画面間の遷移にあなたのアプリケーションのための方法を提供し、ナビゲーションの履歴を管理します.あなたのアプリが1つだけのスタックナビゲーターを使用している場合、それは概念的には、Webブラウザはナビゲーションの状態を処理する方法に似ています-あなたのアプリケーションをプッシュし、ユーザーがそれと対話するようにナビゲーションスタックから項目をポップし、この結果は、ユーザーが別の画面を見て結果.Webブラウザと反応ナビゲーションでどのように動作するかの間の重要な違いは、反応ナビゲーションのネイティブのスタックナビゲータは、ジェスチャーとアニメーションをあなたがAndroidとIOSのスタック内のルート間を移動すると期待する提供しています.
最も一般的なナビゲータを示すことから始めましょう.createNativeStackNavigator
ネイティブなスタックナビゲータライブラリのインストール
我々が今までインストールしたライブラリはナビゲータのためのビルディングブロックと共有基盤です、そして、反応ナビゲーションの各々のナビゲータはそれ自身の図書館に住んでいます.ネイティブのスタックナビゲーターを使用するには、インストールする必要があります@react-navigation/native-stack

npm install @react-navigation/native-stack

ネイティブスタックナビゲータの作成createNativeStackNavigator 2つのプロパティを含むオブジェクトを返す関数です.Screen and Navigator . どちらも、ナビゲータを構成するために使用される反応コンポーネントです.The Navigator 含むべきScreen 要素がルートの設定を定義します.NavigationContainer ナビゲーションツリーを管理し、ナビゲーション状態を含むコンポーネントです.このコンポーネントはすべてのナビゲータ構造をラップしなければなりません.通常、我々は通常、コンポーネントからエクスポートされている我々のアプリのルートで、このコンポーネントをレンダリングしますApp.js.

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;

このコードを実行すると、空のナビゲーションバーとあなたのhomescreenコンポーネント(上記に示す)を含む灰色のコンテンツエリアが表示されます.ナビゲーションバーとコンテンツエリアを参照するスタイルは、スタックナビゲータの既定の構成です.


ナビゲータの設定
すべてのルートの設定は、我々のナビゲータに小道具として指定されます.我々はナビゲータにすべての小道具を渡されていないので、それはデフォルトの設定を使用します.
ネイティブのスタックナビゲーターに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>
  );
}

今、私たちのスタックには2つのルートがありますHome ルートとDetails ルートを使用してルートを指定できますScreen コンポーネント.The Screen コンポーネントは、name ルートの中で、我々はナビゲートするために使用しますcomponent プロップされるコンポーネントに対応するprop.
ここでHome 経路はHomeScreen コンポーネントとDetails 経路はDetailsScreen コンポーネント.スタックの初期ルートはHome ルート変更してみてくださいDetails そして、アプリケーションをリロードする(ネイティブの高速更新を反応しないから変更を更新しません)initialRouteName , あなたが期待しているかもしれないが、あなたが今見ることに注意してくださいDetails スクリーン.その後、それをHome そして再びロードします.

オプションの指定
ナビゲータの各画面は、ヘッダーに表示するタイトルなどのナビゲータに対していくつかのオプションを指定できます.これらのオプションは、各スクリーンコンポーネントのオプションプロップで渡すことができます.

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

ナビゲータ内のすべての画面に対して同じオプションを指定することもあります.そのためには、我々はscreenOptions ナビゲータにプロップします.

追加小道具を渡す
時々我々は画面に追加小道具を渡すことがあります.2つの方法で行うことができます.
1 .コンテキストを使用して、コンテキストプロバイダーを使用して、ナビゲータを画面に渡す(推奨).
2 .コンポーネントのプロップを指定する代わりに、screenのレンダリングコールバックを使用する

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

結論

ネイティブの反応は、Webブラウザのようなナビゲーションのための組み込みAPIを持っていません.反応ナビゲーションは、画面の間に遷移するには、IOSとAndroidのジェスチャーやアニメーションと一緒に、これを提供します.

Stack.Navigator 構成のための追加小道具を持つ子供として経路設定をして、我々の内容を貸すコンポーネントです.

それぞれStack.Screen コンポーネント名prop これはルート名とcomponent ルートに対してレンダリングするコンポーネントを指定するprop.これらは2必須の小道具です.

スタック内の初期ルートを指定するには、initialRouteName ナビゲータの支柱として.

screen固有のオプションを指定するには、オプションのpropをStack.Screen , そして、共通のオプションのために、我々はscreenOptions to Stack.Navigator