更改选项卡时重置导航堆栈(StackNavigators 嵌套在 TabNavigator 中)

问题描述

我有两个 StackNavigator.电影:

I have two StackNavigator. Movies:

const MoviesStackNavigator = createStackNavigator({
  Movies: Movies,
  MovieDetails: MovieDetails,
},{
  initialRouteName: 'Movies',
})

和演员:

const ActorsStackNavigator = createStackNavigator({
  Actors: Actors,
  ActorDetails: ActorDetails,
},{
  initialRouteName: 'Actors',
})

我在 TabNavigator 中使用它们:

I am using them inside a TabNavigator:

const RootTabs = createBottomTabNavigator({
  Movies: {
    screen: MoviesStackNavigator,
    navigationOptions: {
      tabBarLabel: 'Movies'
    }
  },
  Actors: {
    screen: ActorsStackNavigator,
    navigationOptions: {
      tabBarLabel: 'Actors'
    }
  },
})

当用户更改选项卡时，我希望他到达该选项卡的根组件(Movies 或 Actors)，而不是堆叠组件(MoviesDetails 或 ActorsDetails).换句话说，当用户退出选项卡时，该选项卡中的 StackNavigator 应重置为根组件.

When the user changes tab, I want him to arrive to the root component of that tab (Movies or Actors), not to a stacked component (MoviesDetails or ActorsDetails). In other word, when a user quits a tab, the StackNavigator in that tab should be resetted to the root component.

我的第一种方法是在初始化选项卡中的根组件时使用 StackActions.reset 以尝试重置另一个选项卡(用户刚刚退出)，但库阻止导航器之间的交互，在至少在那种情况下.

My first approach was to use StackActions.reset when initializing the root component in a tab to try to reset the other tab (that the user just quit) but the library prevents interacting between navigators, at least in that way.

那么，有什么想法吗?

推荐答案

我的解决方案是使用 tabBarOnPress:

My solution was to use tabBarOnPress:

const RootTabs = createBottomTabNavigator({
  Movies: {
    screen: MoviesStackNavigator,
    navigationOptions: {
      tabBarLabel: 'Movies',
      tabBarOnPress: ({navigation, defaultHandler}: any) => {
        navigation.navigate('Actors')
        defaultHandler()
      },
    }
  },
  Actors: {
    screen: ActorsStackNavigator,
    navigationOptions: {
      tabBarLabel: 'Actors',
      tabBarOnPress: ({navigation, defaultHandler}: any) => {
        navigation.navigate('Movies')
        defaultHandler()
      },
    }
  },
})

这篇关于更改选项卡时重置导航堆栈(StackNavigators 嵌套在 TabNavigator 中)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！