React Native - 观察AsyncStorage值的变化？

Question

有没有一种方法可以订阅一个 AsyncStorage 值变化？我在一个地方有一个设置，这个设置保存在 AsyncStorage 在一个应用程序中，它会影响到其他所有屏幕。我需要观察这个值，以便能够更新所有的屏幕。我尝试了 getValue 方法，但它似乎只在最初得到一个值，而不是在变化时更新。

Answer 1

你可以使用 AsyncStorage.getItem() 在一个useEffect中，在你的组件挂载后立即观察该值。

    useEffect(() => {
    (async () => {
        console.log(await AsyncStorage.getItem('YOUR_ITEM_KEY'));
    })();
}, []);

使用这种语法，你可以用 "YOUR_ITEM_KEY "键记录项目。

如果你使用的是类组件，你可以这样做。

show = async () => {
       console.log(await AsyncStorage.getItem('YOUR_ITEM_KEY'));
}

componentDidMount(){
       this.show();
}

Answer 2

当然，如果你使用 react-native-easy-app 为了帮助你使用AsyncStorage，你可以通过react-native-easy-app，获得两个好处。

第一：可以同步快速访问AsyncStorage，支持直接访问字符串、布尔、对象、数组等数据。代码段

第二：当你修改任何一个AsyncStorage数据时，都会有一个回调函数来告诉你相应的数据变化。代码片段

详情请参考 样板工程

您可以按以下方式使用。

  import { XStorage } from 'react-native-easy-app';
  import { AsyncStorage } from 'react-native';
  // or import AsyncStorage from '@react-native-community/async-storage';

   export const RNStorage = {
       token: undefined, 
       isShow: undefined, 
       userInfo: undefined
   };

  const initCallback = () => {

       // From now on, you can write or read the variables in RNStorage synchronously

       // equal to [console.log(await AsyncStorage.getItem('isShow'))]
       console.log(RNStorage.isShow); 

       // equal to [ await AsyncStorage.setItem('token',TOKEN1343DN23IDD3PJ2DBF3==') ]
       RNStorage.token = 'TOKEN1343DN23IDD3PJ2DBF3=='; 

       // equal to [ await AsyncStorage.setItem('userInfo',JSON.stringify({ name:'rufeng', age:30})) ]
       RNStorage.userInfo = {name: 'rufeng', age: 30}; 
  };

const dataSetChangedCallback = (data) => {

    data.map(([keyStr, value]) => {
        let [, key] = keyStr.split('#');
        console.log('data has changed:', key, '<###>', value);
    })
};

XStorage.initStorage(RNStorage, AsyncStorage, initCallback, dataSetChangedCallback);