如何在Tabs点击两次时如何导航StackNavigator?

时间:2017-11-06 18:40:40

标签: react-native react-navigation

我有一个带三个标签的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 ...

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

应用组件呈现() - &gt; AppNavigator (TabNavigator - 优惠,菜肴,收藏)

菜肴组件呈现() - &gt; DishesStack (StackNavigator - DishList,Dish)

enter image description here

enter image description here

2 个答案:

答案 0 :(得分:1)

我错过了将导航道具全部传递给组件..

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

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

如果导航器被一个组件包裹,那么传递路由器也是必要的:

DishesScreen.router = DishesStack.router;

请参阅此部分:Nesting Navigators

答案 1 :(得分:0)

这对我有用

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