阻止用户在 React Native 中成功登录后返回登录屏幕

Posted 2023-04-13

【中文标题】阻止用户在 React Native 中成功登录后返回登录屏幕

【英文标题】：Prevent user from going back to login screen after logging in successfully in React Native

【发布时间】：2020-03-07 21:30:34

【问题描述】：

我有 3 个屏幕。 A=>登录，B=>仪表板，C=>个人资料。

最初，当用户未登录时，登录屏幕会呈现。登录后，我使用 AsyncStorage 来保存 userId（我从 API 响应中获得）。 如果用户已经登录并打开应用程序，我已将用户重定向到仪表板页面。

这些是我在代码实现中面临的问题。

登录后，如果用户在仪表板页面（Andriod）上按下返回按钮，它会导航回登录屏幕。这次没有调用 componentDidMount() 方法，所以我无法检查用户是否来自仪表板屏幕。 我尝试在 Dashboard 的 componentDinMount() 方法上注册 BackHandler 事件，条件 => 如果用户按下返回按钮，应用程序将退出，但问题是我无法在同一屏幕上删除此事件，所以如果我去从仪表板到配置文件屏幕，如果我按后退按钮从配置文件页面，应用程序退出。

我想要实现的是，登录后，直到用户按下注销按钮，用户应该无法进入登录屏幕。

【问题讨论】：

React Native - Device back button handling的可能重复

【参考方案1】：

您需要重置导航历史记录

这是我的一个项目中的一个 sn-p，我需要做同样的事情：

this.props.navigation.reset([NavigationActions.navigate( routeName: 'DevicesList')], 0);

【参考方案2】：

当从“登录屏幕”导航到“仪表板”时，您可以通过使用切换导航器而不是堆栈导航器来简单地实现此目的。

const MainStack = createStackNavigator(
    DashboardScreen: Dashboard,
    ProfileScreen: Profile
);

export default createAppContainer(createSwitchNavigator(
  LoginScreen: Login,
  Main: MainStack
));

【参考方案3】：

为此，我建议使用 SwitchNavigator（如果使用 react-navigation）。这将使前一个屏幕（在本例中为您的 LoginScreen）卸载，并且您将无法返回该屏幕，除非您明确告诉它导航到该屏幕。

如果没有，您仍然可以在仪表板屏幕中使用自定义 backHandling，并使用 react-navigaton withNavigationFocus HOC。

componentDidMount 将与您的第一次尝试保持一致。您需要使用 componentDidUpdate 并检查 isFocused 属性，例如：

componentDidUpdate = prevProps => 
   if (prevProps.isFocused !== this.props.isFocused) 
        this.props.isFocused ? this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress) :
        this.backHandler.remove()
   

如果您对其中一种解决方案有疑问，请告诉我

【参考方案4】：

React Navigation v5 文档涵盖了这个用例。 documentation link

【参考方案5】：

要限制用户在成功登录后返回登录屏幕，请使用navigation.replace()。准确地说，制作 2 个不同的堆栈导航器；一个用于入职和登录/注册，第二个用于应用屏幕。

然后在唱歌完成后运行navigation.replace() 而不是navigation.navigate()。

这将删除或分离先前的导航器与整个路由嵌套，直到它被注销。并且在注销时使用相同的概念将用户重定向到登录屏幕。

【参考方案6】：

这是一个使用 StackActions 和 useNavigation 挂钩的示例

// Navigation index
export default function AppNavigation() 
  const Stack = createStackNavigator();
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Login"
        screenOptions=headerShown: false>
        <Stack.Screen name="Login" component=Login />
        <Stack.Screen name="App" component=MainNavigator />
      </Stack.Navigator>
    </NavigationContainer>
  );


// Login
export default function Login() 
    const navigation = useNavigation();
    useEffect(() => 
        // Authenticate the user input
        if (authenticate(input)) 
            navigation.dispatch(StackActions.replace('App'));
        
    , [...])
    ...