React Navigation 5 将参数传递给嵌套导航器中的屏幕

Question

我们正在将 React Navigation 4 中的应用程序迁移到 React Navigation 5。该项目有一个 BottomTabNavigator，它的其中一条路线有一个带有三个选项卡的嵌套 TopTabNavigator。 BottomTabNavigator 中的选项卡之一在按下时导航到排序屏幕，您可以在其中 select 作为排序依据的排序参数，然后导航到添加 selected 排序参数的 "Pending" 路由，这应该到达 TopTabNavigator 内的三个列表屏幕之一。目前我在这些屏幕中收到 route.params 作为 null，我认为这是因为中间有另一个导航器 (topTabNavigator)。

底部标签导航器

    <BottomTabsNavigator.Navigator
      tabBar={props => <CustomTabBar {...props} />}
      initialRouteName="Pending"
    >
      <BottomTabsNavigator.Screen name="Pending" component={createTopTabsNavigator} />
      <BottomTabsNavigator.Screen name="Sort" component={SortScreen} />
      <BottomTabsNavigator.Screen name="Tab 3" component={Fragment} />
      <BottomTabsNavigator.Screen name="Tab 4" component={Fragment} /> 
      <BottomTabsNavigator.Screen name="Tab 5" component={Fragment} />
      <BottomTabsNavigator.Screen name="Filter" component={Fragment} />
    </BottomTabsNavigator.Navigator>

SortScreen 选项卡：

    handleOnPress(item: { text: string; value: string; }): void {
        const {navigation} = this.props;

        const param = {orderBy: item.value};
        navigation.navigate('Pending', param);
    }

    render(){
        return(
            <View>
                <FlatList
                    data={orderOptions}
                    renderItem={({ item }) => (
                        <ListItem style={{ borderBottomWidth: 0 }} onPress={() => this.handleOnPress(item)}>
                            <Body>
                                <Text>{item.text}</Text>
                            </Body>
                        </ListItem>
                    )}
                    keyExtractor={item => item.text}
                />
            </View>
        );
    }

createTopTabsNavigator:

    <TopTabsNavigator.Navigator>
      <TopTabsNavigator.Screen name="List1" component={Screen1} />
      <TopTabsNavigator.Screen name="List2" component={Screen2} />
      <TopTabsNavigator.Screen name="List3" component={Screen3} />
    </TopTabsNavigator.Navigator>

非常感谢能解决这个问题

Answer 1

navigation.navigate('Root', {
  screen: 'Settings',
  params: { user: 'jane' },
});

https://reactnavigation.org/docs/en/nesting-navigators.html#navigating-to-a-screen-in-a-nested-navigator

React Navigation 5 将参数传递给嵌套导航器中的屏幕

React Navigation 5 pass params to screen inside nested navigator

react-native

react-navigation

react-navigation-bottom-tab

react-navigation-v5