React-native StackNavigator 禁止返回

Question

我正在开发一个应用程序，它需要用户登录才能访问该应用程序的功能。一旦用户登录并被重定向到用户堆栈，我不希望他们能够以任何方式返回登录屏幕。

登录成功我使用了：

 this.props.navigation.navigate('User')

我在 react-navigation 网站上的文档中遵循了身份验证流程，但是一旦我按回键，用户就可以返回到登录屏幕。

我将我的屏幕分成两个不同的堆栈，用户和访客，我还有文档中显示的加载屏幕：https://reactnavigation.org/docs/4.x/auth-flow（我使用的是 4.3.3 版）

const Navigator = createStackNavigator(
{
    AuthLoading: AuthLoadingScreen,
    Guest: guest,
    User: user
  },
  {
    initialRouteName: 'AuthLoading',
  }
);
export default createAppContainer(Navigator);

有什么办法可以防止用户回到访客堆栈吗？谢谢

Answer 1

StackNavigator 显然像堆栈一样工作。所以，如果你想阻止用户返回导航，你必须清除堆栈。如果您使用的是简单路线，则可以使用 replace

this.props.navigation.replace('User')

这会将您当前的路由 (AuthLoading) 替换为路由用户。较早的路线将保留在堆栈中。

如果您的 User 和 Guest 本身又是嵌套导航器，我建议使用 reset。

const resetAction = StackActions.reset({
    index: 0,
    actions: [NavigationActions.navigate({ routeName: 'User' })],
});
this.props.navigation.dispatch(resetAction);

这将擦除整个堆栈并用您的新堆栈替换它，您可以直接在动作数组中构建它。

React-native StackNavigator 禁止返回

React-native StackNavigator disable going back

react-native

react-native-navigation