Question

我在ReactJS中进行了本地存储，效果很好。
但是我想将此代码用于React-native。
我很困惑如何申请
该代码是ReactJs的代码。

...
  componentWillMount(){
    const contactData = localStorage.contactData;
    if(contactData){
      this.setState({
        contactData:JSON.parse(contactData)
      })
    }
  }
...
...
  componentWillMount(){
    const contactData = localStorage.contactData;
    if(contactData){
      this.setState({
        contactData:JSON.parse(contactData)
      })
    }
  }
...

我读了这个“ https://facebook.github.io/react-native/docs/asyncstorage.html”
但是我不太了解。

Answer 1

对于React-native存储，您必须使用AsyncStorage。以上代码在react-native中将变为。

...
async componentWillMount(){
const contactData = await AsyncStorage.getItem('contactData');
if(contactData){
  this.setState({
    contactData:JSON.parse(contactData)
  })
}
}
...
...
async componentWillMount(){
const contactData = localStorage.getItem('contactData');
if(contactData){
  this.setState({
    contactData:JSON.parse(contactData)
  })
}
}
...

您可以使用async-await或then / catch promise来处理数据。

Answer 2

    this.retrieveItem(goalCategory).then((goals) => {
              //this callback is executed when your Promise is resolved
              }).catch((error) => {
              //this callback is executed when your Promise is rejected
              console.log('Promise is rejected with error: ' + error);
              }); 

//the functionality of the retrieveItem is shown below
async retrieveItem(key) {
    try {
      const retrievedItem =  await AsyncStorage.getItem(key);
      const item = JSON.parse(retrievedItem);
      return item;
    } catch (error) {
      console.log(error.message);
    }
    return
  }

Answer 3

保存到AsyncStorage

const saveUserId = async userId => {
  try {
    await AsyncStorage.setItem('userId', userId);
  } catch (error) {
    // Error retrieving data
    console.log(error.message);
  }
};

从AsyncStorage检索值

    const getUserId = async () => {
          try {
            const uid = await AsyncStorage.getItem('userId');
             console.log(uid);
              } catch (error) {
                // Error retrieving data
                console.log(error.message);
              }
            };

从AsyncStorage删除

const deleteUserId = async () => {
  try {
    await AsyncStorage.removeItem('userId');
  } catch (error) {
    // Error retrieving data
    console.log(error.message);
  }
}

如何在ReactNative中使用异步存储

3 个答案: