React-Native AsyncStorage

Posted 2023-05-07

【中文标题】React-Native AsyncStorage

【英文标题】：

【发布时间】：2019-11-03 02:44:40

【问题描述】：

我不明白如何使 AsyncStorage 工作。 我使用 react-native-router-flux

基本上我有 3 页：

首页

export default class Authentication extends Component 

   render() 
    return (
      ..........


          <TouchableOpacity
            style =[style.button, style.buttonOK]
            onPress=() => Actions.login() >
            <Text style=style.buttonTesto>LOGIN</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style =[style.button, style.buttonOK]
            onPress=() => Actions.signup() >
            <Text style=style.buttonTesto>SIGNUP</Text>
          </TouchableOpacity>

        </View>
      </View>

    );
  

登录

login() 
    let ctrl = true;
    ......
    if (ctrl) 

      let formdata = new FormData();
      const identity = 
        AppName: 
          Username: this.state.username,
          Password: this.state.password
        
      ;

      formdata.append("Identity", JSON.stringify(identity));
      fetch(APILINK , 
        method: "POST",
        headers: 
          "Content-Type": "multipart/form-data"
        ,
        body: formdata
      )
        .then(response => response.json())
        .then(responseData => 
          if (responseData.Error) 
            .......
           else 
            global.utente = new Utente(responseData);
            Actions.homepageutente();
          
        )
        .catch(err => alert("err:" + err));
    
  

Utente

export default class Utente 
  constructor(data) 
    Utente.saveUtenteLoggato(data);
    this._data = data;
    ....
    );
  
  get data() 
    return this._data;
  
  //there is a function for the signup there//
  .......

  static async saveUtenteLoggato(value) 
    try 
      await AsyncStorage.setItem("@UtenteLoggato", JSON.stringify(value));
     catch (error) 
      console.log(error.message);
    
  

  static async getUtenteLoggato() 
    try 
      return await AsyncStorage.getItem("@UtenteLoggato");
     catch (error) 
      console.log(error.message);
      return null;
    
  

  static async clearUtenteLoggato() 
    try 
      global.utente = null;
      await AsyncStorage.removeItem("@UtenteLoggato");
     catch (error) 
      console.log(error.message);
      return null;
    
  

所以在 Utente 中我创建了 Asyncstorage 功能，但我不明白当我在后台关闭应用程序（例如）以保持登录活动时我应该怎么做。目前，如果我返回应用程序，我应该再次登录。 我该如何解决？

编辑 起始页

class Starting extends Component 
    constructor(props)
    
      super(props)
      this.state = 
        loading: true
      
    

  componentWillMount() 
    Utente.getUtenteLoggato()
      .then(dataUtenteLoggato => 
        if (dataUtenteLoggato !== null) 
          global.utente = new Utente(JSON.parse(dataUtenteLoggato));
         else 
          Actions.authentication();
        
      )
      .catch(err => 
        console.log(err);
      )
      .finally(() => 
        this.setState( loading: false );
      );
  

  render() 
    return(
      <View style=style.container>
        <Spinner visible=this.state.loading textContent="Loading..." textStyle=color: '#FFF' />
      </View>
    );
    

【参考方案1】：

您可以实现闪屏组件并在componentWillMount中检查auth。例如 - 从 AsyncStorage 获取数据，然后执行请求以检查用户是否已通过身份验证并获取用户详细信息。如果存储中不存在身份验证数据（例如身份验证令牌）或服务器抛出身份验证错误（以防令牌无效或过期），则将用户重定向到登录屏幕，否则将用户标记为已通过身份验证并显示主屏幕。

【讨论】：

我不明白如何使用闪屏组件：/

@Jack23 创建一些带有标签“正在加载”的组件作为示例，并在应用程序启动时显示它。在您访问 AsyncStorage 并验证身份验证数据（在 SplashComponent 的 componentWillMount 中）之前，用户会看到该应用程序正在加载。然后您在失败时重定向到登录屏幕或在成功时重定向到主屏幕

好的，现在我明白了 xD 所以在启动画面的 componetWillMount 我使用 AsyncStorage.getItem("@UtenteLoggato") ？

@Jack23 是的，完全正确

我编辑了代码，在其中创建了一个起始页，可以像启动屏幕一样使用。但我只收到一个白页