React Native本地存储方案总结

1. AsyncStorage（键值对存储）

• 适用场景：简单键值对存储（如用户配置、Token、缓存数据）。
• 特点：异步、轻量、API 简单，但性能一般，不推荐存储大量数据。
• 安装：

  npm install @react-native-async-storage/async-storage
  

• 示例代码：

  import AsyncStorage from '@react-native-async-storage/async-storage';
  
  // 存储数据
  const storeData = async (key, value) => {
    try {
      await AsyncStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error('存储失败:', error);
    }
  };
  
  // 读取数据
  const getData = async (key) => {
    try {
      const value = await AsyncStorage.getItem(key);
      return value != null ? JSON.parse(value) : null;
    } catch (error) {
      console.error('读取失败:', error);
      return null;
    }
  };
  
  // 删除数据
  const removeData = async (key) => {
    try {
      await AsyncStorage.removeItem(key);
    } catch (error) {
      console.error('删除失败:', error);
    }
  };
  

2. SQLite（关系型数据库）

• 适用场景：复杂结构化数据（如离线缓存、大量本地数据查询）。
• 特点：支持 SQL 查询，适合复杂数据操作。
• 安装：

  npm install react-native-sqlite-storage
  

• 示例代码：

  import SQLite from 'react-native-sqlite-storage';
  
  // 打开数据库
  const db = SQLite.openDatabase({ name: 'mydb.db', location: 'default' });
  
  // 创建表
  db.transaction((tx) => {
    tx.executeSql(
      'CREATE TABLE IF NOT EXISTS Users (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, email TEXT)'
    );
  });
  
  // 插入数据
  const insertUser = (name, email) => {
    db.transaction((tx) => {
      tx.executeSql('INSERT INTO Users (name, email) VALUES (?,?)', [name, email]);
    });
  };
  
  // 查询数据
  const getUsers = () => {
    return new Promise((resolve, reject) => {
      db.transaction((tx) => {
        tx.executeSql(
          'SELECT * FROM Users',
          [],
          (tx, results) => resolve(results.rows.raw()),
          (error) => reject(error)
        );
      });
    });
  };
  

3. MMKV（高性能键值存储）

• 适用场景：高性能读写需求（如频繁操作的数据）。
• 特点：同步 API、超高性能（比 AsyncStorage 快 30 倍），支持加密。
• 安装：

  npm install react-native-mmkv
  

• 示例代码：

  import { MMKV } from 'react-native-mmkv';
  
  // 初始化
  const storage = new MMKV();
  
  // 存储数据
  storage.set('username', 'JohnDoe');
  
  // 读取数据
  const username = storage.getString('username');
  
  // 删除数据
  storage.delete('username');
  

4. Realm（对象数据库）

• 适用场景：复杂对象数据存储（如需要关联查询的本地数据库）。
• 特点：支持对象模型、高性能查询，适合替代 SQLite。
• 安装：

  npm install realm
  

• 示例代码：

  import Realm from 'realm';
  
  // 定义数据模型
  class User extends Realm.Object {
    static schema = {
      name: 'User',
      properties: {
        id: 'int',
        name: 'string',
        email: 'string',
      },
      primaryKey: 'id',
    };
  }
  
  // 打开 Realm 数据库
  const realm = new Realm({ schema: [User] });
  
  // 写入数据
  realm.write(() => {
    realm.create('User', { id: 1, name: 'Alice', email: 'alice@example.com' });
  });
  
  // 查询数据
  const users = realm.objects('User').filtered('name == "Alice"');
  

5. 文件存储（react-native-fs）

• 适用场景：大文件（如图片、视频、JSON 文件）的读写。
• 安装：

  npm install react-native-fs
  

• 示例代码：

  import { writeFile, readFile, DocumentDirectoryPath } from 'react-native-fs';
  
  // 写入文件
  const filePath = `${DocumentDirectoryPath}/myfile.txt`;
  await writeFile(filePath, 'Hello World!', 'utf8');
  
  // 读取文件
  const content = await readFile(filePath, 'utf8');
  
  // 删除文件
  await unlink(filePath);
  

6. Redux Persist（状态持久化）

• 适用场景：与 Redux 结合的状态持久化。
• 安装：

  npm install redux-persist @react-native-async-storage/async-storage
  

• 示例代码：

  import { persistStore, persistReducer } from 'redux-persist';
  import AsyncStorage from '@react-native-async-storage/async-storage';
  import { createStore } from 'redux';
  
  // 配置 Redux Persist
  const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
  };
  
  const rootReducer = (state = {}, action) => { /* Reducer 逻辑 */ };
  
  const persistedReducer = persistReducer(persistConfig, rootReducer);
  
  // 创建 Store 和 Persistor
  const store = createStore(persistedReducer);
  const persistor = persistStore(store);