1

我有底部选项卡堆栈....在每个堆栈中都有单屏或嵌套堆栈导航器。

问题：

第一个选项卡 - 主屏幕第二个选项卡 - MyDetailsS​​tack(createStackNavigator) - detailScreen1 (initialRoute) - detailScreen2

目标：当用户访问详细detailScreen2 ....然后返回主屏幕并单击第二个选项卡...。我需要重置第二个选项卡以显示它指向的初始路线，即detailScreen1。此时显示了我留下的任何屏幕（即detailScreen2）。

请检查博览会的问题。

https://snack.expo.dev/@rosnk/nested-route-reset-on-tabchange

目前尝试的解决方案：

  1. 尝试添加以下代码：
<Tab.Screen
        name="MyDetailsTabStack"
        component={MyDetailsStack}
        options={{
          title: 'My Details',
          tabBarLabel: 'My Details',
        }}
        listeners={({ navigation, route }) => ({
          tabPress: (e) => {
            navigation.dispatch(
              CommonActions.reset({
                index: 1,
                routes: [
                  { name: 'DetailScreen1' },
                  {
                    name: 'DetailScreen2',
                  },
                ],
              })
            );
          },
        })}
      />

尝试对此堆栈建议的解决方案参考： How to reset a Stack in a different Tab using React Navigation 5.x

4

1 回答 1

0

我也遇到了这个问题。我想在用户离开时reset导航stack回第一个索引tab。我遵循了您链接中的参考，并从中创建了我的问题解决方案。

使用此处useFocusEffect()描述的内容，并在阅读了此处的内容后，下面是我的解决方案，适用于我。Navigation Lifecycle 

const { reset } = useNavigation();
useFocusEffect(
  useCallback(() => {
    // If you want to do something when screen is focused
    return () => {
      // This is called when the screen is not focused
      // i.e. switched to a different tab or the hardware back button is pressed (Android)
      reset({ index: 0, routes: [{ name: "detailScreen1" }] });
    };
  }, []),
);

把它放在你的里面detailScreen2，它应该在用户离开屏幕时重置堆栈导航器状态

于 2022-02-12T07:23:13.050 回答