React Native 本地缓存:react-native-mmkv

在web开发中,通常使用localstorage/sessionStorege等来做本地缓存。在React Native可以使用 react-native-mmkv

安装依赖:

bash 复制代码
yarn add react-native-mmkv

使用

ts 复制代码
import {MMKV, Mode} from 'react-native-mmkv';

export const storage = new MMKV({
  id: `user-${userId}-storage`,
  path: `${USER_DIRECTORY}/storage`,
  encryptionKey: 'da98s7das7d9a8s7d9as87',
  mode: Mode.MULTI_PROCESS,
  readOnly: false,
});

实践

我们创建一个 storage 模块,用来管理本地缓存

ts 复制代码
// src/storage/modules/userStorage.ts
import {MMKV} from 'react-native-mmkv';
import {ENCRYPTION_KEY} from '@env';

export const userStorage = new MMKV({
  id: 'user-storage',
  encryptionKey: ENCRYPTION_KEY,
});

创建一个入口文件导出

ts 复制代码
// src/storage/index.ts
export * from './modules/userStorage';

修改首页查看效果:

tsx 复制代码
import {HomeScreenProps} from '@/navigation/types';
import {Button, Text, View} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import {API_URL} from '@env';
import {scale, ScaledSheet} from 'react-native-size-matters/extend';
import {userStorage} from '@/storage';
import {useMMKVString} from 'react-native-mmkv';

const HomeScreen = ({}: HomeScreenProps) => {
  // const token = userStorage.getString('token');
  const [token, setToken] = useMMKVString('token', userStorage);

  return (
    <SafeAreaView style={styles.container} edges={['top']}>
      <View style={styles.content}>
        <Text style={{fontSize: scale(16)}}> HomeScreen {API_URL} </Text>
        <Button
          title="set user token"
          onPress={() => {
            // userStorage.set('token', '123456');
            setToken('6789');
          }}
        />

        <Text>token: {token || '-'}</Text>
      </View>
    </SafeAreaView>
  );
};

const styles = ScaledSheet.create({
  container: {
    backgroundColor: 'red',
  },
  content: {
    backgroundColor: '#fff',
    fontSize: '20@s',
  },
});

export default HomeScreen;

重启app后,查看效果


Tips

本专栏的代码已开源,后续随着专栏会不断更新https://github.com/ace0109/react-native-template

相关推荐
li35742 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj3 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel3 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel3 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
西陵4 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld4 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
东风西巷6 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
萌萌哒草头将军6 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
半夏陌离6 小时前
SQL 入门指南:排序与分页查询(ORDER BY 多字段排序、LIMIT 分页实战)
java·前端·数据库