react-navigation6.xルーティングライブラリの基本的な使い方の詳しい説明

react-navigation6.xルーティングライブラリの基本的な使い方の詳しい説明

react-nativeプロジェクトの初期化

cmd を開き、rn プロジェクトを作成するフォルダーに移動します。

npx 反応ネイティブ 初期化テストRN

ここではプロジェクト名が testRN に設定されていますが、自分で設定することもできます。

react-nativeプロジェクトをインストールする

Android 仮想マシンまたは USB デバッグ実機を接続し、作成されたプロジェクトのルート ディレクトリに cd し、yarn android をインストールして起動します。

糸アンドロイド

初期インストールが完了した後、携帯電話が切断されていない場合は、仮想マシンまたは携帯電話でプロジェクトアプリを入力するだけで、プロジェクトのルートディレクトリでPCを起動してyarn startを実行し、再度インストールする必要はありません。切断後に再インストールする必要がある場合があります。

糸の始まり

起動後、cmd インターフェイスで r を押して更新します。

react-navigation ルーティングライブラリのインストール

コンテンツは Android テストに基づいて構築されており、iOS はテストしていません。

以下のパッケージを一度にインストールします。

糸を追加 @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/native-stack

Android の追加構成については、 testRN\android\app\src\main\java\com\testrnの MainActivity.java ファイルを変更します。

ここに画像の説明を挿入

コード:

  android.os.Bundle をインポートします。

  @オーバーライド
  保護されたvoid onCreate(バンドルsavedInstanceState) {
    super.onCreate(null);
  }

ルーティングライブラリの使用

app.jsを次のコードに変更します。

'react' から * を React としてインポートします。
'react-native' から { View, Text } をインポートします。
'@react-navigation/native' から {NavigationContainer} をインポートします。
'@react-navigation/native-stack' から createNativeStackNavigator をインポートします。

関数ホームスクリーン() {
  戻る (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>ホーム画面</Text>
    </表示>
  );
}

スタックを初期化します。

関数App() {
  戻る (
    // NavigationContainer はルートのコンテナであり、関連するすべてのコンテンツをそこに置く <NavigationContainer>
      <スタック.ナビゲーター>
        * Stack.Screen はルーティングされたウィンドウであり、name はジャンプ先のウィンドウ名を設定し、ウィンドウのコンポーネント コンテンツはコンポーネント * に配置されます。
        <Stack.Screen name="Home" コンポーネント={HomeScreen} />
      </Stack.Navigator>
    </ナビゲーションコンテナ>
  );
}

デフォルトのアプリをエクスポートします。

ここに画像の説明を挿入

ルートジャンプとルートパラメータの送信

'react' から * を React としてインポートします。

// ボタンを追加
'react-native' から { Button、View、Text } をインポートします。
'@react-navigation/native' から {NavigationContainer} をインポートします。
'@react-navigation/native-stack' から createNativeStackNavigator をインポートします。
                    
                // ナビゲーションパラメータを追加する function HomeScreen({navigation}) {
  戻る (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>ホーム画面</Text>
      ジャンプボタンを追加 */
      <ボタン
        title="詳細へ移動"   
        // navigation.navigate('Details') はジャンプに使用され、Details は対応するウィンドウ名を指します
        onPress={() => navigation.navigate('詳細')}
      />
    </表示>
  );
}

関数の詳細画面() {
  戻る (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>詳細画面</Text>
    </表示>
  );
}

スタックを初期化します。

関数App() {
  戻る (
    // NavigationContainer はルートのコンテナであり、関連するすべてのコンテンツをそこに置く <NavigationContainer>
      <スタック.ナビゲーター>
        * Stack.Screen はルーティングされたウィンドウであり、name はジャンプ先のウィンドウ名を設定し、ウィンドウのコンポーネント コンテンツはコンポーネント * に配置されます。
        <Stack.Screen name="Home" コンポーネント={HomeScreen} />
        <Stack.Screen name="詳細" コンポーネント={DetailsS​​creen} />
      </Stack.Navigator>
    </ナビゲーションコンテナ>
  );
}

デフォルトのアプリをエクスポートします。

ルートタイトルを設定する

デフォルトでは、ウィンドウはタイトルとして名前を使用しますが、自分で設定することもできます。

<Stack.Screen name="Home" コンポーネント={HomeScreen} オプション={{ title: 'my home'}} />

ナビゲーション タイトルとして Home ではなく my home を使用します。

通常、第 1 レベルのページから第 2 レベルのページにジャンプする場合、コンテンツに応じて異なるタイトルが表示されることがあります。このとき、タイトルを動的に設定する必要があります。

<Stack.Screen name="詳細" コンポーネント={DetailsS​​creen}
   オプション = {({ ルート }) => ({ タイトル: route.params.title })}
/>

次に、第 1 レベルのページにジャンプするときにタイトルを渡すだけです。

<ボタン
   title="詳細へ移動"
  // navigation.navigate('Details') はジャンプに使用され、Details は対応するウィンドウ名を指します
   onPress={() => navigation.navigate('詳細', { title: 'セカンダリページ' })}
/>

最初のレベルのページでタイトルが渡されない場合は、空のオブジェクトを渡すか、2 番目のレベルのウィンドウで初期値を設定するのが最適です。そうしないと、エラーが報告されます。

また、画面上のオプションのプロパティを変更するnavigation.setOptions()を使用してタイトルを手動で更新することもできます。

<ボタン
   title="タイトルを更新"
   onPress={() => navigation.setOptions({ title: '更新されました!' })}
/>

カスタムタイトルコンポーネント

カスタマイズ可能で画像にもできる機能コンポーネントを返すように headerTitle コールバックを設定します。

関数LogoTitle() {
  戻る (
    <画像
      スタイル={{ 幅: 50, 高さ: 50 }}
      ソース={require('./src/img/details.png')}
    />
  );
}

<Stack.Screen name="Home" コンポーネント={HomeScreen}
   オプション={{
     タイトル:「私の家」
     ヘッダータイトル: (props) => <LogoTitle {...props} />
   }}
/>

タイトルボタン

また、画面のオプションには、ボタンを配置できる headerRight があります。

        <Stack.Screen name="Home" コンポーネント={HomeScreen}
          オプション={{
            タイトル:「私の家」
            ヘッダータイトル: (props) => <LogoTitle {...props} />,
            ヘッダー右: () => (
              <ボタン
                onPress={() => alert('これはボタンです!')}
                title="情報"
                カラー="#fff"
              />
            )、
          }}
        />

headerBackImageSource は戻るボタンの画像を変更できます。

        <Stack.Screen name="詳細" コンポーネント={DetailsS​​creen}
          オプション={({ ルート }) => (
            {
              タイトル: route.params.title,
              ヘッダーバックイメージソース: detailsImg、
            }
          )}
        />

react-navigation6.x ルーティングライブラリの基本的な使い方についてはこれで終わりです。 react-navigation6.x ルーティングライブラリの関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。 今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • React-navigationはタイトルの内容を動的に変更します
  • Reactナビゲーションの使用中に遭遇した問題の概要
  • React Native react-navigation ナビゲーションの使用法の詳細
  • react-navigationでユーザーがログインしているかどうかを判断し、ログインページにジャンプする方法
  • react-navigation を使用した React Native でのクロスタブルーティング処理の詳細な説明
  • React Native 学習チュートリアル: カスタムナビゲーションバーの詳細な説明
  • ページジャンプナビゲーションに react-navigation を使用する React-native の例

<<:  MySQLクエリのパフォーマンスを分析する方法

>>:  CSSの省略記号とパディングを組み合わせた場合の問題の詳細な説明

推薦する

MongoDB データベースの状態を監視する Zabbix3.4 メソッド

Mongodb には db.serverStatus() コマンドがあり、これを使用して Mongo...

Linux curl フォームのログインまたは送信と Cookie の使用に関する詳細な説明

序文この記事では主に、curl を介してフォーム送信ログインを実装する方法について説明します。単一の...

MySQL空間関数を使用してロケーションパンチインを実装するための完全な手順

序文プロジェクトの要件は、ユーザーの現在の位置が特定の地理的位置範囲内にあるかどうかを判断することで...

Linux nohup はプログラムをバックグラウンドで実行し、表示します (nohup と &)

1. バックグラウンド実行一般的に、Linux 上のプログラムは .sh ファイル (./sh フ...

JavaScript における async と await の使い方とメソッド

JS の async 関数と await キーワード 関数ヘルワールド() { 「こんにちは!美しい...

HTML シンプルショッピング数量アプレット

この記事では、参考までにシンプルなHTMLショッピング数量アプレットを紹介します。具体的な内容は次の...

Ubuntu で XFS ファイルシステム用の LVM を作成する方法

序文lvm (論理ボリューム マネージャー) 論理ボリューム管理は、Linux システムのニーズを満...

MySQLの外部ネットワークアクセス権を開く方法

以下のように表示されます。主に認証コマンドを実行します: 2つの方法1. 任意のホストがユーザー b...

Jenkins を通じて None のイメージを定期的にクリーンアップする方法

序文継続的なコード配信のプロセスで、Jenkins を利用して Docker イメージを作成すると、...

MySQLのロック構造の詳細な説明

Mysqlは3種類のロック構造をサポートしていますテーブルレベルのロック、低オーバーヘッド、高速ロッ...

背景とリンクとして画像を書き込む方法(背景画像+リンク)

写真を背景にしてリンクを記載します。たとえば、ウェブサイトのロゴ画像などです。例: ポテトのロゴ画像...

Ubuntu 20.04でルートアカウントを有効にする方法

Ubuntu 20.04 をインストールした後、デフォルトでは root アカウントのログイン権限が...

DockerにRedisをインストールし、パスワードを設定して接続する方法

Redis は分散キャッシュ サービスです。キャッシュは、大規模システムの開発やパフォーマンスの最適...

MySQLは現在の日付と時刻を取得する関数

現在の日付 + 時刻 (日付 + 時刻) を取得する関数: now() mysql> now(...

SELINUXの動作原理の詳細な説明

1. はじめにSELinux が Linux にもたらす主な価値は、柔軟で構成可能な MAC メカニ...