如何重置导航器中的第一个屏幕？

Question

在我的 React Native 应用程序中，我从一个导航器导航到另一个导航器中的屏幕，如下所示

navigation.navigate(Screens.EXPLORE, {
                  screen: Screens.BRIEF,
                  params: {
                    briefId: briefInfo.campaign_id,
                  },
                });

但是，一旦我执行此操作并点击后退按钮，这会在其自己的导航器中返回之前的屏幕，如果我尝试通过单击应导航到该导航器主屏幕的图标来导航到另一个导航器，它会导航仍然是我之前在导航器中导航的屏幕。当我单击屏幕中的后退按钮来重置导航器时，是否有可能以任何方式，以便当我通常再次导航到它时，它会显示导航器中的第一个屏幕？

Answer 1

嘿，如果您正在使用 @react-navigation/native 那么只需将其导入到您的组件中即可

import { useNavigation } from '@react-navigation/native';

const navigation = useNavigation();

navigation.reset({
  index: 0,
  routes: [{ name: 'Profile' }] 
})

它将重置您的堆栈，您也可以替换而不是导航将当前屏幕替换为新屏幕

navigation.replace('LoginScreen')

我只是将图片放在这里供您参考。

Answer 2

import { CommonActions } from '@react-navigation/native';

navigation.dispatch(
  CommonActions.navigate({
    name: 'Profile',     // your screen name
    params: {
      user: 'jane',     //your params
    },
  })
);

供参考：- https://reactnavigation.org/docs/navigation-actions/#navigate

Answer 3

@this.arjun 的回答没有帮助。我通过将上面的代码更改为这个来解决我的问题

navigation.navigate(Screens.EXPLORE, {
                  screen: Screens.BRIEF,
                  initial: false,
                  params: {
                    briefId: briefInfo.campaign_id,
                    withPop: true,
                  },
                });

然后在我导航到的屏幕中添加了这段代码，而不是仅仅执行 navigation.goBack()

我添加了 withPop 条件逻辑。

onPress={() => {
                        if (withPop) {
                          navigation.pop();
                        }
                        navigation.goBack();
                      }}

当我从那个屏幕返回时，我仍然缺少动画。但我可以忍受。

Answer 4

我在 StackOverflow 上尝试了一些建议，但是，唯一对我有用的是以下建议。

如果您想清理堆栈并添加特定屏幕：

const resetNavigation = (navigation) => {
  navigation.popToTop();
  navigation.push('YourScreen');
};

如果您只想清理堆栈，它将默认为您的第一个屏幕：

const resetNavigation = (navigation) => navigation.popToTop();

我希望这有帮助！