react-native-mmkv 是一个高性能的键值存储库，适用于 React Native 应用。它使用了 MMKV（由微信团队开发的高效的移动端存储引擎），可以快速地存储和读取数据。下面我们将封装一个公共的函数库来简化对 react-native-mmkv 的使用，并提供详细的使用方法和案例。

1. 安装依赖

首先，确保你已经安装了 react-native-mmkv：

npm install react-native-mmkv

或者使用 Yarn：

yarn add react-native-mmkv

如果你使用的是 React Native 0.60 及以上版本，自动链接会处理原生模块的集成；否则需要手动链接。

2. 封装公共函数

我们可以创建一个工具文件，例如 StorageHelper.js，用于封装对 react-native-mmkv 的操作。以下是一个完整的封装示例：

StorageHelper.js

import { MMKV } from 'react-native-mmkv';

// 创建 MMKV 实例
const storage = new MMKV();

/**
 * 存储字符串类型的数据
 * @param {string} key - 键名
 * @param {string} value - 值
 */
export const setString = (key, value) => {
  storage.set(key, value);
};

/**
 * 获取字符串类型的数据
 * @param {string} key - 键名
 * @returns {string | undefined} - 返回值或 undefined
 */
export const getString = (key) => {
  return storage.getString(key);
};

/**
 * 存储布尔类型的数据
 * @param {string} key - 键名
 * @param {boolean} value - 值
 */
export const setBoolean = (key, value) => {
  storage.set(key, value);
};

/**
 * 获取布尔类型的数据
 * @param {string} key - 键名
 * @returns {boolean | undefined} - 返回值或 undefined
 */
export const getBoolean = (key) => {
  return storage.getBoolean(key);
};

/**
 * 存储数字类型的数据
 * @param {string} key - 键名
 * @param {number} value - 值
 */
export const setNumber = (key, value) => {
  storage.set(key, value);
};

/**
 * 获取数字类型的数据
 * @param {string} key - 键名
 * @returns {number | undefined} - 返回值或 undefined
 */
export const getNumber = (key) => {
  return storage.getNumber(key);
};

/**
 * 删除指定的键值对
 * @param {string} key - 键名
 */
export const removeItem = (key) => {
  storage.delete(key);
};

/**
 * 清空所有存储的数据
 */
export const clearAll = () => {
  storage.clearAll();
};

3. 使用方法

在你的 React Native 组件中，可以通过导入 StorageHelper.js 提供的函数来使用这些封装好的方法。

示例代码

import React, { useEffect, useState } from 'react';
import { View, Text, Button } from 'react-native';
import {
  setString,
  getString,
  setBoolean,
  getBoolean,
  setNumber,
  getNumber,
  removeItem,
  clearAll,
} from './StorageHelper';

const App = () => {
  const [storedValue, setStoredValue] = useState('');

  // 存储字符串
  const saveString = () => {
    setString('username', 'JohnDoe');
    alert('字符串已保存！');
  };

  // 获取字符串
  const loadString = () => {
    const username = getString('username');
    setStoredValue(username || '未找到数据');
  };

  // 存储布尔值
  const saveBoolean = () => {
    setBoolean('isLoggedIn', true);
    alert('布尔值已保存！');
  };

  // 获取布尔值
  const loadBoolean = () => {
    const isLoggedIn = getBoolean('isLoggedIn');
    alert(`登录状态: ${isLoggedIn}`);
  };

  // 存储数字
  const saveNumber = () => {
    setNumber('score', 100);
    alert('数字已保存！');
  };

  // 获取数字
  const loadNumber = () => {
    const score = getNumber('score');
    alert(`分数: ${score}`);
  };

  // 删除指定键值对
  const deleteItem = () => {
    removeItem('username');
    alert('键值对已删除！');
  };

  // 清空所有数据
  const clearStorage = () => {
    clearAll();
    alert('所有数据已清空！');
  };

  return (
    <View style={{ padding: 20 }}>
      <Text>存储的值: {storedValue}</Text>
      <Button title="保存字符串" onPress={saveString} />
      <Button title="加载字符串" onPress={loadString} />
      <Button title="保存布尔值" onPress={saveBoolean} />
      <Button title="加载布尔值" onPress={loadBoolean} />
      <Button title="保存数字" onPress={saveNumber} />
      <Button title="加载数字" onPress={loadNumber} />
      <Button title="删除键值对" onPress={deleteItem} />
      <Button title="清空所有数据" onPress={clearStorage} />
    </View>
  );
};

export default App;

4. 案例说明

上述代码展示了如何使用封装的 StorageHelper.js 来进行数据的存储、读取、删除和清空操作。以下是每个功能的具体说明：

保存字符串：调用 setString 方法将字符串存储到本地。

加载字符串：调用 getString 方法从本地读取字符串，并显示在界面上。

保存布尔值：调用 setBoolean 方法将布尔值存储到本地。

加载布尔值：调用 getBoolean 方法从本地读取布尔值，并通过弹窗显示。

保存数字：调用 setNumber 方法将数字存储到本地。

加载数字：调用 getNumber 方法从本地读取数字，并通过弹窗显示。

删除键值对：调用 removeItem 方法删除指定的键值对。

清空所有数据：调用 clearAll 方法清空所有存储的数据。

5. 总结

通过封装 react-native-mmkv，我们简化了其 API 的使用，使得代码更加清晰和易于维护。这种方式不仅提高了开发效率，还减少了重复代码的编写。你可以根据项目需求进一步扩展这些封装函数，例如支持对象的存储和读取（通过 JSON 序列化和反序列化实现）。