gpt4 book ai didi

react-native - Tabs 单击两次时如何导航回 StackNavigator?

转载 作者:行者123 更新时间:2023-12-05 06:37:47 27 4
gpt4 key购买 nike

我有一个带有三个选项卡的 TabNavigator。这三个选项卡中的每一个都是 StackNavigators。

如果用户单击同一个选项卡按钮两次,我如何才能将 StackNavigator 导航回来?

enter image description here

我目前的做法是只做....什么都不做..

tabBarComponent: ({jumpToIndex, ...props, navigation}) => (
<TabBarBottom {...props} jumpToIndex={index => {
const { state } = navigation,
{ routes } = state;

console.log(routes);

if (state.index === index) {
console.log(index);

const resetTabAction = NavigationActions.navigate({
routeName: 'Dishes',
action: NavigationActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'Dishes' })],
})
});
// props.navigation.dispatch(resetTabAction);
navigation.dispatch(resetTabAction);

} else {
jumpToIndex(index);
}
}}/>
),

编辑:我现在将 DishesScreen.router = DishesStack.router; 添加到包装内部 StackNavigator 的组件。现在我可以在路线和状态中看到子导航器。但是 Screen1 (Dish) 不见了。只有一条路线:DishList...

也许是为了更好地理解我的组件:

App Component render() -> AppNavigator (TabNavigator - Deals、Dishes、Favorites)

Dishes 组件 render() -> DishesStack (StackNavigator - DishList,Dish)

enter image description here

enter image description here

最佳答案

我错过了将导航 Prop 传递给所有组件..

<AppNavigator navigation={this.props.navigation} ..... />

<DishesStack navigation={this.props.navigation} .... />

如果导航器被组件包裹,也需要通过路由器:

DishesScreen.router = DishesStack.router;

请参阅此部分:Nesting Navigators

关于react-native - Tabs 单击两次时如何导航回 StackNavigator?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47143574/

27 4 0