当前位置：首页 > news >正文

ReactNative 使用腾讯的MMKV持久化存储

news 2025/9/11 0:36:03

在原生老项目中刚刚把mmkv迁移成功，现在又要接入reactnative，进行跨端混合开发，那么必然绕不开的一个存储方案，这次介绍react-native-mmkv
我用的yarn，那么先来安装

yarn add react-native-mmkv

安装成功后使用，我简单用AI封装了一下，作为项目底层键值对存储方案使用


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

/**
 * 项目持久化存储实例
 */
export class MMKVManage {

    private static instance: MMKVManage;
    private mmkv: MMKV;

    constructor() {
        this.mmkv = new MMKV();
    }

    public static getInstance(): MMKVManage {
        if (!MMKVManage.instance) {
            MMKVManage.instance = new MMKVManage();
        }
        return MMKVManage.instance;
    }

    public getItem<T = any>(key: string): T | null {
        return this.mmkv.getString(key) as T; // 根据需要调整类型转换
    }

    public setItem(key: string, value: any): void {
        if (typeof value === 'string') {
            this.mmkv.set(key, value);
        } else {
            this.mmkv.set(key, JSON.stringify(value)); // 对于非字符串类型，先转换为字符串存储
        }
    }

    public removeItem(key: string): void {
        this.mmkv.delete(key);
    }
}

那么基础存储方案写好以后，如何使用呢看下方中间层封装字段

import {MMKVManage} from './MMKVManage.ts';

export class LocalStorage {
  private static instance: LocalStorage;

  constructor() {}

  public static getInstance(): LocalStorage {
    if (!LocalStorage.instance) {
      LocalStorage.instance = new LocalStorage();
    }
    return LocalStorage.instance;
  }

  public getTeacherId(): string {
    return <string>MMKVManage.getInstance().getItem('teacherId');
  }

  public setTeacherId(teacherId: string): void {
    MMKVManage.getInstance().setItem('teacherId', teacherId);
  }
}

最后在业务中进行使用

<Button
        title={'保存数据'}
        onPress={() => {
          LocalStorage.getInstance().setTeacherId('123456');
          Alert.alert('保存成功');
        }}
      />
      <Button
        title={'读取数据'}
        onPress={() => {
          let teacherId = LocalStorage.getInstance().getTeacherId();
          setId(teacherId);
          Alert.alert('获取成功' + teacherId);
        }}
      />