react-native - React Navigation 导航的工作方式类似于 goBack

Question

在我的 React Native 项目中，我希望用户导航到登录页面。并且，在登录页面，用户可以填写输入进行登录。然后，如果登录过程成功，用户应该导航回主页。

我正在使用 this.props.navigation.navigate 函数进行所有导航。但是在登录页面，导航功能并没有像我预期的那样工作。它的工作方式类似于 goBack 函数。这样我就无法更新主页的状态。

我应该怎么做才能让导航功能始终如一地工作？

标签： react-nativereact-navigation

Answer 1

解决方案

使用Modal. （推荐）

用一个选项包装你的homeStack和AuthStack使用。或使用.createStackNavigationModalcreateSwitchNavigation

const MainStack = createStackNavigator(
  {
    Home: {
      screen: HomeStack,
    },
    Auth: {
      screen: AuthStack,
    },
  },
  {
    mode: 'modal',
  }
);

或者

使用“推送”或“替换”而不是“导航”可以是其他选项。

为什么？

如果屏幕已经堆叠为您的进程 home->login->home ，goBack即使您在 stackNavigation 中使用它也可以正常工作。navigate因此，使用modal可以是一种简单而酷的方式。

模态：https ://reactnavigation.org/docs/en/modal.html