使用 react-navigation 单击每个选项卡时如何显示初始路线答案

【问题标题】：how to show initial routes when click on each tab using react-navigation使用 react-navigation 单击每个选项卡时如何显示初始路线
【发布时间】：2019-07-26 10:34:20
【问题描述】：

在标签栏中，我为每个标签使用了两个标签作为创建单独的导航器这是我的代码：

const HomeStack = createStackNavigator({
  Home: HomeScreen,
  Details: DetailsScreen,
});

const SettingsStack = createStackNavigator({
  Settings: SettingsScreen,
  Profile: ProfileScreen,
});

const TabNavigator = createBottomTabNavigator(
  {
    Home: HomeStack,
    Settings: SettingsStack,
  }
);

我们从 HomeScreen 开始并导航到 DetailsScreen。然后我们使用标签栏切换到 SettingsScreen 并导航到 ProfileScreen。完成这一系列操作后，所有 4 个屏幕都已安装！如果我使用标签栏切换回 HomeStack，我正在显示主屏幕，但我希望需要显示 HomeScreen 而不是详细信息屏幕。

任何有用的建议，在此先感谢。

【问题讨论】：

你可以使用navigation.popToTop()。
您找到解决方案了吗？

标签： react-native react-navigation

【解决方案1】：

这实际上对于 react-navigation 来说非常棘手。

在全局范围内实现此目的的一种方法是使用tabBarOnPress callback 在每次更改选项卡时重置堆栈：

import { StackActions, NavigationActions } from 'react-navigation';

const TabNavigator = createBottomTabNavigator({
  Home: HomeStack,
  Settings: SettingsStack,
}, {
  defaultNavigationOptions: {
    tabBarOnPress: ({ navigation, defaultHandler }) => {
      defaultHandler(); // Switch tab
      if (navigation.state.index > 0) { // In case the stack is not positioned at the first screen
        const resetAction = StackActions.reset({ // Reset the stack
          index: 0,
          actions: [
            NavigationActions.navigate({ routeName: navigation.state.routes[0].routeName })
          ],
        });
        navigation.dispatch(resetAction);
      }
    },
  },
});

每当用户切换选项卡时，新堆栈将移动到第一个索引，以防它尚未出现。

【讨论】：

你好，react navigation 5 怎么做？请帮帮我。