10-2 YAPI 接口和本地数据存储

在本节中，我们将讲解类别模块的数据结构以及本地持久化存储的知识。

一、YAPI 接口

1. 接口数据

类别模块的数据相对较多且固定，因此我们直接在 YAPI 中创建接口，并将数据写死。可以访问以下链接获取数据：

• 接口地址：http://39.105.213.120/mock/11/bear/category

您也可以在项目源码的 raw 文件夹下找到 api.json 文件，并将其导入到本地 YAPI 中。

二、本地数据存储

1. 安装 AsyncStorage

由于 React Native 0.60 版本之后移除了内置的 Storage，我们需要安装第三方库 @react-native-community/async-storage：

yarn add @react-native-community/async-storage

然后进入 ios 文件夹执行以下命令链接库：

cd ios/ && pod install

返回根目录并重新安装应用：

yarn ios
yarn android

2. AsyncStorage 的功能

@react-native-community/async-storage 库的功能相对简单，仅支持保存字符串类型的数据。为了满足更多需求，我们可以使用社区提供的 react-native-storage 库。

3. 安装 react-native-storage

yarn add react-native-storage

4. 配置 Storage

在 config 文件夹中创建 storage.ts 文件，配置存储：

import AsyncStorage from '@react-native-community/async-storage';
import Storage, { LoadParams } from 'react-native-storage';

const storage = new Storage({
  size: 1000, // 最大容量，默认值1000条数据循环存储
  storageBackend: AsyncStorage, // 存储引擎：对于 RN 使用 AsyncStorage
  defaultExpires: 1000 * 3600 * 24 * 7, // 数据过期时间，默认7天
  enableCache: true, // 读写时在内存中缓存数据，默认启用
  sync: {}, // 配置同步方法
});

// 从 storage 中获取数据
const load = (params: LoadParams) => {
  return new Promise((resolve, reject) => {
    storage
      .load(params)
      .then((ret) => {
        resolve(ret);
      })
      .catch((err) => {
        console.log(err);
        reject(err);
      });
  });
};

export { load };
export default storage;

三、总结

在本节中，我们学习了类别模块的数据结构和本地数据存储的知识。我们使用了 YAPI 创建接口，并安装了 react-native-storage 库来实现本地持久化存储。下一节，我们将学习如何在应用加载时请求类别接口，并将数据保存到本地存储中，同时展示到页面上。

---