React Nativeのカスタムルーティング管理に関する深い理解

React Nativeのカスタムルーティング管理に関する深い理解

1. カスタムルーティング

ご存知のとおり、ネイティブ Android でも iOS でも、デフォルトのルーティング スタック管理クラスがあります。 React Native はルート管理用のコンポーネントを公式に提供していないため、ルートを管理するには react-navigation プラグインが提供する Stack.Navigator コンポーネントを使用する必要があります。

Stack.Navigator は名前付きルートを使用します。いわゆる名前付きルートは、ルートを使用する前に宣言する必要があることを意味します。ルーティング ページの管理を容易にするために、以下に示すように、ルートを screens パッケージなどの統一された場所に配置します。

次に、プロジェクトの screens/index.js ファイルに新しい定数を作成します。これは、次に示すように、宣言されたルートを管理するために主に使用されるものです。

エクスポートconstスタック=[
  {
    名前: 'AllMovieScreen',
    コンポーネント: AllMovieScreen、
    オプション: {headerShown: false},
  },
  {
    名前: 'CitySelectScreen',
    コンポーネント: CitySelectScreen、
    オプション: {title: '都市を選択'},
  },
  .... //他のルーティングページを省略];

次に、ルーティングジャンプ、リターン、その他の操作を実装するための新しい MainStackScreen.js ファイルを作成します。同時に、MainStackScreen クラスのもう一つの機能は、ナビゲーション バーのスタイルを統一することです。コードは次のとおりです。

MainStack を createStackNavigator() に追加します。

関数 MainStackScreen({ナビゲーション}) {
  戻る (
    <メインスタック.ナビゲーター
      初期ルート名="アプリ"
      画面オプション={{
        ヘッダータイトル配置: 'center'、
        ヘッダースタイル: {
          影オフセット: {幅: 0, 高さ: 0},
          影色: '#E5E5E5',
          背景色: '#fff',
        },
        ジェスチャー有効: true、
        ヘッダーバックタイトル表示: false、
        ヘッダー左: () => (
          <タッチ可能な不透明度
            onPress={() => navigation.goBack()}
            スタイル={{パディング: 10, パディング右: 30}}>
            <アイコン名="chevron-thin-left" サイズ={20} 色="#222222" />
          </TouchableOpacity>)、
      }}>
      <メインスタック.スクリーン
        名前="アプリ"
        コンポーネント={下部タブ}
        オプション={{headerShown: false}}/>
      {stacks.map((item, index) => (
        <メインスタック.スクリーン
          キー={index.toString()}
          名前={アイテム名}
          コンポーネント={item.component}
          オプション={item.options}/>
      ))}
    </メインスタック.ナビゲーター>
  );
}

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

上記のコードでは、screens/index.js ファイルを作成してアプリケーション ルートを宣言し、MainStackScreen クラスの map ループを使用してルートの登録を完了します。ご覧のとおり、上記の処理の後、ルーティング管理は非常に明確になります。新しいページがある場合は、screens/index.js ファイルにルートを追加するだけで済みます。

2. タブナビゲーション

React Native アプリケーション開発では、 react-navigation はルーティング管理機能を提供するだけでなく、タブナビゲーションとドロワーナビゲーションもサポートします。また、最新バージョンでは、タブナビゲーション、ドロワーナビゲーション、スタックナビゲーションが依存するライブラリが別々になっているため、開発プロセス中に個別にインストールする必要があります。

タブナビゲーションの場合、プロジェクトにタブナビゲーションに必要な bottom-tabs ライブラリをインストールする必要があります。コマンドは次のとおりです。

npm インストール @react-navigation/bottom-tabs    

Tab ナビゲーションを作成するには、createBottomTabNavigator() メソッドが必要です。このメソッドは、それぞれ Tab.Navigator コンポーネントと Tab.Screen コンポーネントに対応する navigator と route という 2 つのプロパティを提供する必要があります。最後に、以下に示すように、NavigationContainer コンポーネントを使用してそれらをラップする必要があります。

'@react-navigation/bottom-tabs' から {createBottomTabNavigator} をインポートします。
'@react-navigation/native' から {NavigationContainer} をインポートします。

定数 BottomTabs = createBottomTabNavigator();

デフォルト関数BottomTabScreen()をエクスポートする{
  戻る (
    <ナビゲーションコンテナ>
      <BottomTabs.Navigator
        initialRouteName="ホーム"
        screenOptions={({route}) => ({
          タブバーアイコン: ({focused}) => {
            戻る (
              <画像ソース={ focused? tabImage[`${route.name}_active`]
                    : tabImage[ルート名]
                }
                スタイル={{幅: 26, 高さ: 26}}/>
            ); }})}}
        タブバーオプション={{
          アクティブティントカラー: 'トマト'、
          非アクティブTintColor: 'グレー'、
          スタイル: {
            背景色: '#fff',
          },
        }}>
        <BottomTabs.Screen
          name="ホーム"
          コンポーネント={ホーム画面}
          オプション={{
            tabBarLabel: '映画',
          }}/>
         
.... //他のコードは省略 <BottomTabs.Screen
          name="私のもの"
          コンポーネント={MineScreen}
          オプション={{
            tabBarLabel: 'マイ',
          }}/>
      </BottomTabs.Navigator>
    </ナビゲーションコンテナ>
  );
}

同時に、bottom-tabs プラグインは他の多くの便利なコンポーネントとプロパティも提供しており、開発者はニーズに応じて選択できます。上記のコードを実行すると、その効果は次の図に示されます。

3. データの返却

場合によっては、次のページにジャンプし、次のページでデータを選択した後にポストバックする必要があることがあります。例えば:

上記のシナリオでは、アクティビティ リストをフィルターする必要があります。アクティビティ フィルター ページに移動した後、選択したアクティビティ タイプを返す必要があります。このシナリオでは、react-navigation をどのように処理すればよいでしょうか。

まず、以下に示すように、screens/index.js ファイルにアクティビティ タイプ ページを登録します。

{
  名前: 'セレクタスクリーン',
  コンポーネント: SelectorScreen、
  オプション: nav => {
    定数{ルート} = nav;
    const {params = {}} = ルート;
    const {title = 'アクティビティタイプ', onRightPress = () => {}} = params;
    戻る {
       タイトル、
       ヘッダー右: () => (
         <タッチ可能な不透明度
            onPress={onRightPress}
            スタイル={styles.button}>
            <Text style={{color: '#fff', fontSize: 14}}>OK</Text>
         </タッチ可能な不透明度>
        )、
      };
    },
  }

同時に、アクティビティ リスト ページからアクティビティ フィルタリング ページのデータが渡されます。そのため、使用する場合は、上記でカプセル化したルーティングツールを使用してジャンプ操作を実行するだけで済みます。コードは次のとおりです。

ナビゲート('セレクタスクリーン', {
      値: カテゴリ.map(c => c.andGroupName)、
      デフォルト値: カテゴリ名、
      onConfirm: changeCategory、
    });

ご覧のとおり、フィルター ページで選択されたデータを取得するために、ジャンプ時に onConfirm コールバック関数を定義しました。次に、新しく作成したアクティビティ フィルタリング ページで前のページから渡されたアクティビティ データを受け取り、以下に示すようにリストを使用して表示します。

関数SelectorScreen({ナビゲーション、ルート}) {
  const {values ​​= [], defaultValues ​​= [], onConfirm} =route.params || {};
  const [選択された、setSelected] = useState(defaultValues);

  const _onRightPress = () => {
    onConfirm(選択済み);
    ナビゲーション.goBack();
  };

  使用効果(() => {
    ナビゲーション.setParams({onRightPress: _onRightPress});
  }, [選択済み]);

  定数onPressItem = val => {
    arr = [] とします。
arr = [値];  
選択されたものをセットします。
  };

  const レンダリングアイテム = ({item}) => {
    const レンダリング右 = () => {
    const isSelected = selected.includes(item);
    戻る (
      <リスト項目
        テキスト={アイテム}
        レンダリング右={レンダリング右}
        onPress={() => onPressItem(item)} />
    );
  };

  戻る (
    <表示スタイル={styles.bg}>
      <フラットリスト
        keyExtractor={(item, index) => アイテム + インデックス}
        データ={値}
        レンダリングアイテム = {レンダリングアイテム}
        ListFooterComponent={<ビューの高さ={120} />}} />
    </表示>
  );
};

const スタイル = StyleSheet.create({
 .... // スタイルコードを省略 });

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

アクティビティの種類を選択した後、選択した結果を前のページに戻すにはどうすればよいですか?このとき、以下のように、上で定義した onConfirm コールバック関数が使用されます。

const {values ​​= [], defaultValues ​​= [], onConfirm} =route.params || {};

const _onRightPress = () => {
    onConfirm(selected); //onConfirm コールバック関数はデータを返します navigation.goBack();
 };

要約する

React Nativeカスタムルーティング管理に関するこの記事はこれで終わりです。React Nativeカスタムルーティング管理に関するより関連性の高いコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • React NativeのScrollViewプルダウンリフレッシュ効果
  • React NativeのstartReactApplicationメソッドの簡単な分析
  • React Nativeの起動プロセスの詳細分析
  • React NativeプロジェクトでLottieアニメーションを使用する方法

<<:  Linux seqコマンドの使い方

>>:  Django2.* + Mysql5.7 開発環境統合チュートリアル図

推薦する

WeChatアプレットがシンプルな計算機機能を実装

WeChatアプレット:シンプルな計算機、参考までに、具体的な内容は次のとおりです。ミニプログラムに...

純粋な CSS を使用してユーザーが Web ページのコンテンツをコピーするのを防ぐ方法

序文私自身の個人ブログを入力しているときに、ブログの詳細ページでさまざまなコンテンツをコピーするさま...

JS で Websocket ベースのマルチターミナル ブリッジング プラットフォームを実装する方法

目次1. デバッグ対象2. WebSocketの機能3. ソケット接続を確立する3.1 部屋の作成方...

dockerでpdflatex環境を設定する方法

技術的背景Latex は文書作成、特に記事作成には欠かせないツールであり、必須のテキスト組版ツールで...

ブラウザ間の hr 区切り文字の違い

Webページを作るときに、区切り線hrを使うことがありますが、IE6やIE7で表示するのは非常に苦痛...

MySQL移行計画と落とし穴の実践記録

目次背景解決策1: 古いデータをバックアップするオプション2: テーブルを分割する解決策3: tid...

MySQL における datetime と timestamp の違いと選択

目次1 違い1.1 スペース占有1.2 表現範囲1.3 タイムゾーン2 テスト3つの選択肢MySQL...

Dockerの基礎

序文: Docker はオープンソースのアプリケーション コンテナ エンジンであり、開発者はこれを使...

HTML における水平および垂直の中央揃え方法の詳細な説明 (基礎)

序文馬を書いていたとき、水平方向と垂直方向の中央揃えの方法について、誰もあまり知らなかったと思います...

node.js グローバル変数の具体的な使用法

グローバルオブジェクトすべてのモジュールは呼び出すことができますglobal: ブラウザの wind...

CSS3 アドバンス LESS で星空アニメーションを実装するサンプルコード

この記事では、星空アニメーションを実現するための高度な CSS3 LESS のサンプルコードを次のよ...

Django は Pillow を使用して検証コード機能を簡単に設定します (Python)

1. モジュールをインポートし、検証状態を定義する PIL から Image、ImageDraw、...

Nginx のリロード プロセスの背後にある真実を探る

本日の記事では、主にNginxのリロードプロセスについて紹介します。実は前回の記事では、nginx ...

Linux での syslogd および syslog.conf ファイルの解釈

1: syslog.conf の概要異なるタイプの Unix の場合、標準の UnixLog システ...

MySQL 文字列連結関数 GROUP_CONCAT の詳細な説明

前回の記事では、クロステーブル更新について書きました。自分が書いた SQL を見たとき、自分がバカみ...