React native-如何在 react native 中只显示一次登录屏幕？

Posted 2023-04-13

【中文标题】React native-如何在 react native 中只显示一次登录屏幕？

【英文标题】：React native- How to display login screen only one time in react native?

【发布时间】：2016-12-09 00:49:44

【问题描述】：

我正在创建一个项目，其中有一个注册屏幕，用于用户注册到应用程序。此注册屏幕应该只在第一次可见，因此用户可以填写并登录，但当用户第二次打开应用程序时，应用程序必须导航到主页。

我不明白该怎么做。

【参考方案1】：

如果您使用本地存储来存储用户登录的事实，您可以检查用户是否存在于存储中。如果用户存在于存储中，则设置表示初始路由组件的状态（将它们引导到登录以外的屏幕）。否则让起始组件成为登录组件。

如果您使用的是 Navigatorios，您可能会在 index.ios.js 文件中执行以下操作：

return(
<NavigatorIOS
    style=styles.navigatorContainer
    initialRoute=
      title: this.state.title,
      component: this.state.component,
    
 />
 )

【参考方案2】：

您应该存储凭据，或者一个简单的布尔标志，指示用户在 AsyncStorage 中登录

某些服务（如 Firebase）在其 SDK 内部执行此操作

然后，在应用启动时，您从 AsyncStorage 读取数据并决定显示哪个屏幕。

【参考方案3】：

在登录按钮上

onLogin=async()=>
  //Your login logic
    await AsyncStorage.setItem('isLoggedIn',true)
    

在初始屏幕上

componentDidMount=async()=>
  let loginStatus=await AsyncStorage.getItem('isLoggedIn')
  this.props.navigation.navigate(loginStatus ? 'Home':'Login')
    

这可能对你有帮助

【参考方案4】：

您应该使用 localStorage 来检查应用是否有凭据并将应用重定向到这样的登录屏幕

  useEffect(() => 

      const _retrieveData = async () => 
         try 
           const value = await AsyncStorage.getItem('@key');
           if (value !== null) 

             // let's go 
           else 
              props.navigation.navigate('HomeScreen')
           
          catch (error) 
           // Error retrieving data
         
      ;

         _retrieveData()

    ,[])