gpt4 book ai didi

react-native - React Navigation 5 将参数传递给嵌套导航器内的屏幕

转载 作者:行者123 更新时间:2023-12-04 14:37:23 24 4
gpt4 key购买 nike

我们正在将 React Navigation 4 中的应用程序迁移到 React Navigation 5。
该项目有一个BottomTabNavigator,它的其中一个路由有一个嵌套的TopTabNavigator,带有三个选项卡。按下时BottomTabNavigator 中的一个选项卡导航到排序屏幕,您可以在其中选择排序参数进行排序,然后导航到添加所选排序参数的“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>
);
}

创建TopTabsNavigator:
    <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

关于react-native - React Navigation 5 将参数传递给嵌套导航器内的屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60179154/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com