Question

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

我不明白该怎么做。

Answer 1

如果您使用本地存储来存储用户已登录的事实，则可以检查用户是否存在于存储中。如果用户存在于存储中，请设置表示初始路由组件的状态（将其指向除登录以外的屏幕）。否则将起始组件作为登录组件。

如果您正在使用NavigatorIOS，您可以在index.ios.js文件中执行以下操作：

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

Answer 2

您应该存储凭据或一个简单的布尔标志，表明用户已在AsyncStorage

中登录

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

然后，在应用启动时，您从AsyncStorage中读取并决定要显示的屏幕。

Answer 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')
    }

这可能对您有帮助

Answer 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()

    },[])

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

4 个答案: