Question

我有两个StackNavigator。电影：

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

和演员：

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

我在TabNavigator中使用它们：

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

当用户更改选项卡时，我希望他到达该选项卡的根组件（电影或演员），而不是堆叠的组件（MoviesDetails或ActorsDetails）。换句话说，当用户退出选项卡时，该选项卡中的StackNavigator应重置为根组件。

我的第一种方法是在初始化选项卡中的根组件时尝试使用StackActions.reset来尝试重置另一个选项卡（用户刚刚退出），但是该库至少以这种方式阻止了导航器之间的交互。

那么，有什么想法吗？

Answer 1

我的解决方案是使用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()
      },
    }
  },
})

更改选项卡时重置导航堆栈（嵌套在TabNavigator中的StackNavigator）

1 个答案: