React Navigation TabNavigator：在选项卡更改时重置上一个选项卡答案

【问题标题】：React Navigation TabNavigator: Reset previous tab on tab changeReact Navigation TabNavigator：在选项卡更改时重置上一个选项卡
【发布时间】：2018-07-05 16:09:15
【问题描述】：

我有以下路线结构：

StackNavigator
-StackNavigator
-TabNavigator
--Tab1
---Route 1 (Stack) (initial)
---Route 2 (Stack)

--Tab2
---Route 3 (Stack) (initial)
---Route 4 (Stack)

当我访问Tab1 -> Route 1 -> Route 2 -> Tab2 并返回Tab1 时，活动路由是2 而不是initialRoute 1。

我正在做以下事情：

tabBarOnPress: ({ scene }) => {
    const { route } = scene;
    const tabRoute = route.routeName;
    const { routeName } = route.routes[0];

    navigation.dispatch(NavigationActions.navigate({ routeName: tabRoute }));

    navigation.dispatch(NavigationActions.reset({
        index: 0,
        actions: [
            NavigationActions.navigate({ routeName }),
        ],
    }));
},

但问题是它首先显示Route 2，然后导航到Route 1。

如何重置以前的选项卡/屏幕，以便在切换选项卡时始终直接显示初始路线。

【问题讨论】：

我很忙，因此只发表评论。但是google为jumpToIndex，它是TabBar的一个道具，也可以用来重置堆栈。
你可以在这里查看我对一个非常相似的问题的回答：stackoverflow.com/a/48446647/2805067
这能回答你的问题吗？ React Native Navigation: Reset Stack Navigator

标签： javascript reactjs react-native react-navigation

【解决方案1】：

5.x.x 版本的解决方案：

将监听器传递给屏幕组件：

<Tab.Screen
     name="homeTab"
     component={HomeStackScreen}
     listeners={tabBarListeners}
/>

然后在这个监听器上，每次按下标签时导航用户：

const tabBarListeners = ({ navigation, route }) => ({
    tabPress: () => navigation.navigate(route.name),
});

致谢：https://github.com/react-navigation/react-navigation/issues/8583

4.x.x 版本的解决方案：

tabBarOnPress: ({ navigation }) => {
  navigation.popToTop();
  navigation.navigate(navigation.state.routeName);
}

致谢：https://github.com/react-navigation/react-navigation/issues/1557

2.x.x 和 3.x.x 版本的解决方案：

问题是当我重置路由时，我需要传递上一个路由名称（离开标签）的导航动作，并为下一个路由调度一个新的导航动作：

tabBarOnPress: ({ previousScene, scene }) => {
    const tabRoute = scene.route.routeName;
    const prevRouteName = previousScene.routes[0].routeName;

    navigation.dispatch(NavigationActions.reset({
        index: 0,
        actions: [
            NavigationActions.navigate({
                routeName: prevRouteName
            }),
        ],
    }));

    navigation.dispatch(NavigationActions.navigate({
        routeName: tabRoute
    }));
}

【讨论】：

【解决方案2】：

使用 unmountOnBlur 选项，它适用于所有类型的导航器、堆栈导航器、抽屉导航器、底部标签导航器

在导航器屏幕的 options 属性中传递 unmountOnBlur

【讨论】：

对我来说效果很好。为什么没有点赞？这种解决方案有缺点吗？
@SergeyYarotskiy 官方页面有评论，Normally, we don't recommend enabling this prop as users don't expect their navigation history to be lost when switching tabs. If you enable this prop, please consider if this will actually provide a better experience for the user.(stackoverflow.com/questions/61611483/…)
但这将是一个很好的答案，简单易行。

【解决方案3】：

你可以试试这样的重置道具：

tabBarOnPress: ({ scene }) => {
    const { route } = scene;
    const tabRoute = route.routeName;
    const { routeName } = route.routes[0];

    navigation.dispatch(NavigationActions.reset({
        index: 1,
        actions: [
            NavigationActions.navigate({ routeName }),
            NavigationActions.navigate({ routeName: tabRoute })
        ],
    }));
},

编辑：如果这不能解决问题，您可以查看this github issue with some workarounds

【讨论】：

不幸的是，它不起作用。它抛出了一个错误：There is no route defined for key Tab2. Must be one of: 'Route 1', 'Route 2'。如果我直接点击第二个选项卡就会出现。