React Native | 缓存
处理缓存时，查阅RN官方文档已标记AsyncStorage处理缓存已过时，推荐使用npm包。
@react-native-async-storage/async-storage
跟 localStorage 类似，API 也几乎一样, 个人推这个，其他npm包试了下晦涩难懂～
// 缓存值
const storeData = async (key:string, value:any) => {
try {
const jsonValue = JSON.stringify(value)
await AsyncStorage.setItem(key, jsonValue)
} catch (e) {
// saving error
}
}
// 缓存取值
const getData = async (key:string) => {
try {
const jsonValue = await AsyncStorage.getItem(key)
return jsonValue != null ? JSON.parse(jsonValue) : null;
} catch(e) {
// error reading value
}
}
storeData('userInfo', {name: 'ahaha'})
const getInfo = async () => {
const userInfo = await getData('userInfo')
console.log(userInfo)
}
注意点：
引用该包后，如果遇到项目启动时一直卡住，在metro.config.js加入如下配置：
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
+ nonInlinedRequires: [
+ "@react-native-async-storage/async-storage",
+ 'React',
+ 'react',
+ 'react-native',
+ ],
},
}),
},
};