在原生老项目中刚刚把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
如果你跑不起来,千万别喷我,先看看你的版本配置是否兼容,我确实是成功了!!!