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

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

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 をエクスポートします。

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

'@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>
    </ナビゲーションコンテナ>
  );
}

{
  名前: 'セレクタスクリーン',
  コンポーネント: 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、
    });

関数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 をエクスポートします。

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

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