React navigation 4、bottom tab navigator：每次后台重新打开app时如何打开初始路由答案

【问题标题】：React navigation 4, bottom tab navigator: how to open the initial route every time the app is re-opened from the backgroundReact navigation 4、bottom tab navigator：每次后台重新打开app时如何打开初始路由
【发布时间】：2020-02-20 15:45:58
【问题描述】：

当前行为

我有一个带有 4 个选项卡的 TabNavigator，每个选项卡都是一个 stackNavigator，现在每个 stackNavigator 只有一个屏幕：主页、地图、预订、个人资料。我正在使用 React Navigation 4。在每个选项卡中，我都放置了 navigationOption tabBarOnPress 在屏幕之间导航，因此 backBehavior: 'history' 是有意义的。

const TabNavigator =   createBottomTabNavigator(
  {
    Home: {
      screen: HomeStack,
      navigationOptions: {
        tabBarOnPress: ({navigation}) => {
          navigation.navigate('Home')
        },
      }
    },
//other tabs
  },
  {
    initialRouteName: 'Home',
    backBehavior: 'history'
  }
)

但是如果我在屏幕之间导航可能是按 HOME -> PROFILE -> HOME -> MAPS 的顺序，由于导航功能的行为，路由器的堆栈是 PROFILE、HOME、MAPS。类似地，当我们在安卓设备上按下后退按钮时，访问屏幕的顺序是 MAPS -> HOME -> PROFILE，如果我们再次按下后退按钮，我们将退出应用程序，将其放入的背景。现在，回到应用程序中，打开的屏幕是 PROFILE，它也是导航堆栈中的第一条路线。

预期行为

当我从后台重新打开应用程序时，我不想在 PROFILE 屏幕中，而是在 HOME 屏幕中。我想重置导航堆栈中的第一条路线，用 HOME 堆栈更改它。这将是 Instagram 的相同行为（尝试去主页 -> 个人资料 -> 主页，按两次后退按钮；现在第三次按后退按钮：应用程序进入后台；现在重新打开 Instagram：应用程序从首页重启）

【问题讨论】：

我也有同样的问题，你找到解决办法了吗？
stackoverflow.com/a/52188720/9254735 - 看到这个。您可以检测到应用程序是否来自后台。如果是，则在 PROFILE 上导航到 HOME

标签： react-native react-navigation react-navigation-bottom-tab

【解决方案1】：

也许为时已晚，但请在您的应用中添加此内容：

React.useEffect(() => {
  const appStateChangeSub = AppState.addEventListener(
    "change",
    (nextAppState) => {
        if (nextAppState === "active") {
            NavigationService.navigate("Home");
        }
    }
  );
  return () => {
    appStateChangeSub.remove();
  };
}, []);

NavigationService -> 见doc

【讨论】：