Javascript 反应导航选项卡导航器：在选项卡更改时重置上一个选项卡

我的路线结构如下：

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，而不是

初始路径

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 }),
        ],
    }));
},

但问题是它首先显示

路线2

，然后导航到

路线1

---

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

您可以尝试使用以下重置道具：

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 })
        ],
    }));
},

---

编辑：如果这不能解决问题，您可以检查版本5.x.x的解决方案：

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

将侦听器传递到屏幕组件：

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

学分：

---

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

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

学分：

---

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

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

问题是，当我重置路线时，我需要传递上一个routeName（离开选项卡）的导航操作，并为下一条路线分派新的导航操作：

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
    }));
}

---

使用unmontonblur选项它适用于所有类型的导航器、堆栈导航器、抽屉导航器、底部选项卡导航器

---

在导航器屏幕的选项道具中传递UNMONTONBLUR

我正忙着atm，因此只做评论。但是google for

jumpToIndex

，它是TabBar的一个道具，也可以用于重置堆栈。你可以在这里查看我对一个非常类似问题的回答：这是否回答了你的问题？不幸的是，它不起作用。它抛出了一个错误：

没有为键Tab2定义路由。必须是“路线1”、“路线2”中的一个。

。如果我直接单击第二个选项卡，则会出现此对话框。