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

在原生老项目中刚刚把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);
        }}
      />

应该是比较简单吧,我用的版本给出来
react-native:0.78.1
mmkv:3.2.0
node:22.12.0

如果你跑不起来,千万别喷我,先看看你的版本配置是否兼容,我确实是成功了!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

落魄的Android开发

感谢支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值