如何从登录页面获取用户名并在 React Native 的所有页面（组件）上动态使用它

Posted 2023-02-23

【中文标题】如何从登录页面获取用户名并在 React Native 的所有页面（组件）上动态使用它

【英文标题】：How Do I get the username from Login Page and use it dynamically on all pages (Components) in React Native

【发布时间】：2021-04-17 03:34:45

【问题描述】：

我有这个挑战。我想使用从登录组件获得的用户名，一旦用户登录并成功验证，它应该反过来保存用户名，以便它可以在应用程序的所有页面上使用。我是 React Native 开发的新手，所以使用会话我不是很熟悉它。

我想知道如何保存登录表单中的用户名，以便可以在应用程序的所有页面中使用它。我尝试做类似的事情

  switch(key)
  
      case "BVN":
         this.props.navigation.navigate('bvn',user: this.state.user);
          break;
      case "Transfers":
            this.props.navigation.navigate('Transfers',user: this.state.user);
            break;
      case "Bill Payments":
        this.props.navigation.navigate('BillPayments');
            break;
      case "Checkbook Requests":
            this.props.navigation.navigate('CheckBookRequest');
            break;
      case "Airtime Purchase":
            this.props.navigation.navigate('AirtimePurchase');
            break;
      case "Contact Us":
            this.props.navigation.navigate('Contact');
            break;
  

以便它可以使用其他页面上的状态，但是，当我使用 getParam 获取用户时，它不显示任何内容。为什么会这样？

在这种情况下我需要帮助。

编辑

这就是我想要实现的目标

//Login

Login = async() =>

    if(username =='james_hall' && password=='qasim1234')
        await AsyncStorage.setItem(this.state.username,'1');
        this.props.navigation.navigate('Home');
    else
    
        alert('Username or Password is invalid');
    

//在 Transfers 页面上获取帐户，以便我可以在 Picker 中使用

 LoadAccountNumber = async() =>
    
        const AccountNum = await AsyncStorage.getItem(this.state.username); //gotten from saved state
        //make GET request to fetch Details
        
           var searchAPIURL = 'https://uncoiled-crust.000webhostapp.com/api/searchData.php?AccountNum='+AccountNum;
         var header = 
             'Accept': 'application/json',
             'Content-Type': 'application/json'
         ;
    
         fetch(
             searchAPIURL,
             
                 method : 'GET',
                 headers : header
             
         ).then((response) => response.json())
          .then((responseJson)=> 
              this.setState(Fullname:responseJson[0].Fullname);
              this.setState(balance:responseJson[0].balance);
              this.setState(AccountNum:responseJson[0].AccountNum);
          )
    
    

在声明状态和所有之后。它仍然返回 Null。我会应要求分享我的源代码。如果需要的话

请多多指教。

【参考方案1】：

您可以使用AsyncStorage 在您的应用重新启动时存储和访问用户信息，并决定是导航到主屏幕还是登录屏幕

const setItem = async (user) => 
        try 
            await AsyncStorage.setItem("user", JSON.stringify(user));
            console.log('data stored');
         catch (error) 
            // Error saving data
            console.log('AsyncStorage save error: ' + error.message);
        
;

【讨论】：

AsyncStorage 将用户名保存在应用程序上，以便所有其他页面可以使用相同的用户名并进行 REST api 调用？

@Evans 是的，它可以保存用户名，也可以是字符串中的用户对象，可以使用应用程序的任何屏幕

【参考方案2】：

实际上，如果你想在用户从内存中杀死你的应用程序之后仍然需要用户名，你需要像我们上面提到的朋友一样使用``ÀsyncStorage```。这是一个缺点，你的应用会消耗手机的一些内存。

如果您只想要会话的用户名，也就是说，您的用户名将在登录后在应用程序的任何地方都可用，但是当他从内存中杀死该应用程序时，用户名将不再存在。为此，您可以使用redux。这是一个大话题，所以看看链接，你可以问我任何问题。

取决于你的上下文来发现你必须使用哪个库:)。

等待您的反馈。谢谢 :)。

【讨论】：

请参阅编辑

``ÀsyncStorage.setItem(key,value)``` 像字典一样工作（键和值），所以你必须在Login 方法await AsyncStorage.setItem('username',username); 之后，在任何放置在您的应用程序中，您可以执行const username = await AsyncStorage.setItem('username'); 来获取用户的用户名。你现在明白了吗？等待您的反馈谢谢 :)。

我设法让它工作，现在它在 ma 应用程序上运行良好。现在我已经学会了如何在 react native 中创建会话。非常感谢

太好了！不客气。我很高兴你的问题得到了解决。如果你愿意，请点赞我的回答:)。