React Native - 观察异步存储值的变化?

Question

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

Answer 1

我通过构建一个同步到 AsyncStorage 的 React 上下文在我的应用程序中解决了这个问题。

在您的情况下，您可以调用一个项目，例如appSettings.这将是一个字符串化的 JSON 对象，用于保存所有应用设置。

const AppSettingsContext = React.createContext({})
const AppSettingsContextProvider = ({children}) => {
const [appSettingsInitialized, setAppSettingsInitialized] = useState(false)
const [appSettings, setAppSettings] = useState({}) // could use some default values instead of empty object
// On mount, get the current value of `appSettings` in AsyncStorage
useEffect(() => {
AsyncStorage
.getItem('appSettings')
.then(data => {
// If data is returned, the storage item existed already and we set the appSettings state to that.
if (data) {
setAppSettings(JSON.parse(data))
}
// If data is null, the appSettings keeps the default value (in this case an empty object)/
// We set appSettingsInitialized to true to signal that we have successfully retrieved the initial values.
setAppSettingsInitialized(true)
})
}, [])
// setSettings sets the local state and AsyncStorage
const setSettings = (key, value) => {
const mergedSettings = {
...appSettings,
[key]: value
}
// First, merge the current state with the new value
setAppSettings(mergedSettings)
// Then update the AsyncStorage item
AsyncStorage.setItem('appSettings', JSON.stringify(mergedSettings))
}
return (
<AppSettingsContext.Provider value={{
appSettings,
appSettingsInitialized,
setSettings,
}}>
{children}
</AppSettingsContext.Provider>
)
}

(请注意，这是一个非常基本的版本，没有错误处理(

然后将应用包装在 AppSettingsContextProvider 中

const App = () => (
<AppSettingsContextProvider>
{/* Other components */}
</AppSettingsContextProvider>
)

然后使用任何子组件中的上下文：

const SomeChildComponent = () => {
const { appSettingsInitialized, appSettings } = useContext(AppSettingsContext)
// For example: wait until initial appSettings have been retrieved AsyncStorage,
// then use some value that you expect to be present in your business logic.
// In this case, setAppTheme would set the them color for the whole app, using a
// `theme` setting saved by the user.
useEffect(() => {
if (appSettingsInitialized) {
setAppTheme(appSettings.theme)
}
}, [appSettingsInitialized])
// Update settings like this for example
const updateThemeSetting = (newThemeValue) => {
setSettings('theme', newThemeValue) // eg 'dark', 'light', etc
}
}

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);

Answer 3

您可以在 useEffect 中使用AsyncStorage.getItem()在组件挂载后立即监视该值。

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();
}