【 RN 】缓存

281 阅读1分钟

处理缓存时,查阅RN官方文档发现已标记AsyncStorage处理缓存已过时,推荐使用npm包

Snipaste_2023-08-03_10-24-00.png

@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',
    +        ],
           },
         }),
       },
     };

参考资料