Tabs 单击两次时如何导航回 StackNavigator？

Question

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

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

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

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)

Answer 1

这对我有用

if (state.index === index) {
    dispatch(NavigationActions.reset({
        index: 0,
        actions: [NavigationActions.navigate({ routeName: 'Dishes })],
    }));
}else{
    jumpToIndex(index);
}

Answer 2

我错过了将导航道具传递给组件的所有过程..

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

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

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

DishesScreen.router = DishesStack.router;

查看此部分：Nesting Navigators

Tabs 单击两次时如何导航回 StackNavigator？

How to navigate back a StackNavigator when Tabs clicked twice?

react-native

react-navigation