我们正在将 React Navigation 4 中的应用程序迁移到 React Navigation 5。 该项目有一个 BottomTabNavigator，其中一个路由有一个嵌套的 TopTabNavigator，有三个选项卡。按下 BottomTabNavigator 中的一个选项卡将导航到排序屏幕，您可以在其中选择要作为排序依据的排序参数，然后导航到添加所选排序参数的"挂起"路由，该参数应到达 TopTabNavigator 内的三个列表屏幕之一。 目前，我在这些屏幕中接收 route.params 为空，因为中间有另一个导航器(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>
"排序屏幕"选项卡：
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>
非常感谢与此问题的帮助
navigation.navigate('Root', {
screen: 'Settings',
params: { user: 'jane' },
});
https://reactnavigation.org/docs/en/nesting-navigators.html#navigating-to-a-screen-in-a-nested-navigator