【免费下载链接】react-native-mmkv⚡️ The fastest key/value storage for React Native. ~30x faster than AsyncStorage!项目地址https://gitcode.com/gh_mirrors/re/react-native-mmkv点击查看免费下载本文以 example/README.md 中的「Getting Started」流程为核心讲解如何在本仓库中把example/示例工程完整跑起来启动 Metro、构建 Android/iOS 应用、通过 Fast Refresh 修改并验证 UI并额外覆盖仓库实际存在的 Web 运行脚本与 react-native-harness 跨平台测试体系。读完后你能够独立操作该示例工程的开发、调试、构建与测试全流程。一、示例工程定位与目录结构example/是一个使用react-native-community/cli引导的标准 React Native 应用应用名MmkvExample见 app.json通过 monorepo 工作区内的react-native-mmkv: *依赖直接引用本仓库的库包见 example/package.json。其目录职责如下example/src/App.tsx演示应用入口组件直接使用createMMKV与 MMKV Hooksexample/index.js/example/index.web.js原生与 Web 两套注册入口均通过AppRegistry.registerComponent注册MmkvExampleexample/android/、example/ios/双端原生壳工程Android 为com.mrousavy.mmkv.exampleiOS 目标名为MmkvExampleexample/scripts/web-dev.mjs、example/scripts/web-proxy.mjs仓库自建的 Web 开发服务器与同源代理example/__tests__/MMKV.harness.ts基于 react-native-harness 的真实设备端到端测试example/rn-harness.config.mjsHarness 多平台运行器配置。example/package.json 中定义的 npm scripts 是本工程一切操作命令的来源完整对照如下脚本实际命令用途startreact-native start启动 Metro对应文档 Step 1androidreact-native run-android构建并安装 Android 应用Step 2iosreact-native run-ios构建并运行 iOS 应用Step 2podsbundle install cd ios bundle exec pod install一步完成 CocoaPods 安装与安装testjest运行 JestHarness presettest:harnessreact-native-harness在真实模拟器/浏览器上运行 harness 测试web:devnode ./scripts/web-dev.mjs启动 Web 开发服务器web:proxynode ./scripts/web-proxy.mjsHarness Web 测试的同源代理build:android-releasecd android ./gradlew assembleRelease --no-daemon构建 Android 发布包lint/lint-cieslint prettier代码风格检查CI 模式零容忍警告运行环境前置条件example/package.json 的engines字段要求node 20.19.4依赖 React Native 0.85.3、React 19.2.6 与react-native-nitro-modules0.35.9MMKV 4.x 基于 Nitro Modules 而非传统 Bridge。开始之前请先按 React Native 官方「Set Up Your Environment」指南配置好 Xcode、Android SDK 等基础环境原文档中的外部链接在此不再展开以官方文档为准。二、Step 1启动 Metro在示例工程根目录执行# 使用 npm npm start # 或使用 Yarn yarn start该命令即react-native start启动 JavaScript 构建工具 Metro。示例工程的 Metro 配置并非默认值example/metro.config.js 做了三处关键定制理解它们是排查加载问题的前提watchFolders: [workspaceRoot]监视范围扩大到 monorepo 根目录使 Metro 能感知packages/react-native-mmkv内源码的变化——这也是示例工程可以直接依赖本地库包而非 npm 版本的原因resolver.platforms: [web, ios, android, native]显式声明平台解析顺序让同一个依赖在四端都能正确解析到对应实现例如*.web.ts文件单例重定向SINGLETONS重写resolver.resolveRequest将react、react-native、react-dom、react-native-web强制解析到工作区根目录的node_modules避免 monorepo 中出现双份 React 实例并且当 platform 为web时把裸的react-native入口重定向到react-native-web。// example/metro.config.js 中的单例解析核心逻辑 const SINGLETONS [react, react-native, react-dom, react-native-web]; // platform web 且模块为 react-native 根入口时重定向到 react-native-web三、Step 2构建并运行应用在 Metro 保持运行的前提下另开一个终端执行以下命令原文档 Step 2 的双端流程完整保留。Android# 使用 npm npm run android # 或使用 Yarn yarn android该脚本映射到react-native run-android会编译 example/android 下的 Gradle 工程并推送到已连接的设备或模拟器。原生壳工程的MainActivity.kt/MainApplication.kt位于example/android/app/src/main/java/com/mrousavy/mmkv/example/。若要产出发布包可改用仓库提供的npm run build:android-release。iOSiOS 需要额外处理 CocoaPods 依赖。原文档说明首次 clone 后需先安装 CocoaPods 本身之后每次更新原生依赖时都要重新安装# 首次安装 Ruby bundler 依赖即 CocoaPods 本身 bundle install # 之后每次更新原生依赖时执行 bundle exec pod install仓库也封装了等价的npm run pods即bundle install cd ios bundle exec pod install。随后执行# 使用 npm npm run ios # 或使用 Yarn yarn ios从 example/ios/Podfile 可以看到这是标准 RN 0.85 Podfile目标MmkvExample内调用use_native_modules!与use_react_native!由 Nitro Modules 的自动链接机制见 packages/react-native-mmkv/ios 与NitroMmkv.podspec把库的原生实现链入。配置正确后应能在 Android 模拟器、iOS 模拟器或真机上看到运行中的应用也可以绕过 CLI直接用 Android Studio 或 Xcode 打开example/android、example/ios构建。附Web 端运行仓库扩展能力裸 React Native 并不自带 Web 开发模式仓库为此在 example/scripts/ 下提供了两套脚本npm run web:devweb-dev.mjs自动以bunx react-native start --port 8081拉起 Metro轮询/status等待就绪最长 90 秒然后在本地 3000 端口提供一个同源的 HTML 壳页面通过/index.bundle?platformweb加载由 index.web.js 注册的MmkvExample。可用环境变量PORT默认 3000、METRO_PORT默认 8081、METRO_URL复用已运行的 Metro调整npm run web:proxyweb-proxy.mjs当 Harness 自行托管 Metro 时用HARNESS_METRO_URL默认http://localhost:8081与PROXY_PORT默认 3000在浏览器与 Harness 的 Metro 之间做同源代理使 HTML、bundle 与/__harnessWebSocket 都从单一源加载规避浏览器跨域限制。四、Step 3修改应用并验证热更新示例应用的主界面在 example/src/App.tsx它本身就是一份 MMKV 4.x API 的最小可用示例const storage createMMKV(); // 模块级创建默认实例 export default function App() { const keys useMMKVKeys(storage); // 响应式获取全部 key const [example, setExample] useMMKVString(nitrooooo); // 响应式读写字符串 useMMKVListener((k) { console.log(${k} changed! New size: ${storage.byteSize}); // 监听任意实例的值变化 }); // Save 按钮storage.set(key, text)Read 按钮storage.getString(key) }按原文档 Step 3 操作在编辑器中打开App.tsx做修改保存后应用会通过 Fast Refresh 自动更新界面需要强制重置应用状态时执行全量重载Android按两次R键或通过开发者菜单Windows/Linux 按Ctrl MmacOS 按Cmd M选择ReloadiOS在 iOS 模拟器中按R键。App.tsx中还演示了深色模式适配useColorSchemecreateDynamicStyles与useMMKVString每秒翻转值的定时器——观察模拟器上nitrooooo键每秒的字符串写入即可直观验证useMMKVListener打印的byteSize变化。五、测试体系Jest 与 react-native-harness原文档未涉及、但仓库实际内置了完整的测试链路且与「修改应用后验证行为」直接相关。Jest 配置 只有一个 projectdisplayName为react-native-harnesspreset 为react-native-harnesstestMatch匹配__tests__/下所有.test/.spec/.harness文件。npm test即按此运行。真正有价值的是 MMKV.harness.ts约 1400 行它不是 mock 单测而是在真实的 Android 模拟器、iOS 模拟器与 Chromium 浏览器上执行完整 API 的端到端断言覆盖范围包括基础 CRUDstring/number/boolean 存取、contains、getAllKeys、remove、clearAll、类型混读原始字节解释、超长字符串、1000 键批量写入实例管理多实例隔离、同配置复用同一实例、importAllFrom跨实例导入、length/byteSize属性、trim加密与安全AES-128/AES-256 创建、encrypt/decrypt重加密、密钥长度边界16/32 字节、密文与明文实例隔离只读模式readOnly: true时set抛错、remove/clearAll静默失败compareBeforeSet同值重复写入不增加byteSize多进程模式mode: multi-process下的读写与加密监听器addOnValueChangedListener在 set/update/remove/clearAll 时的触发次数、多监听器并存、remove()幂等实例级 APIdeleteMMKV返回值、existsMMKV存在性判断错误与边界空 key 抛错、极端数值MAX_SAFE_INTEGER、Infinity、NaN、Unicode/emoji key、100 并发操作。其中 Web 平台不适用的用例ArrayBuffer 往返、加密、只读、多进程、existsMMKV/deleteMMKV语义差异统一通过skipOnWeb(reason)跳过并在控制台打印原因。运行器配置见 rn-harness.config.mjsentryPoint: ./index.js, appRegistryComponentName: MmkvExample, runners: [ androidPlatform({ device: androidEmulator(Pixel_8_API_35, {...}), bundleId: com.mrousavy.mmkv.example }), applePlatform({ device: appleSimulator(iPhone 16 Pro, 18.6), bundleId: com.mrousavy.mmkv.example }), webPlatform({ browser: chromium(http://localhost:8081) }), ], defaultRunner: android, bridgeTimeout: 120000,设备均可用环境变量覆盖HARNESS_ANDROID_AVD默认Pixel_8_API_35、HARNESS_ANDROID_API_LEVEL默认 35、HARNESS_IOS_DEVICE默认iPhone 16 Pro、HARNESS_IOS_VERSION默认 18.6、HARNESS_WEB_URL默认http://localhost:8081。执行npm run test:harness即可默认在 Android 模拟器上运行Web runner 配合npm run web:proxy使用。另注意 babel.config.js 同时加载了react-native-harness/babel-preset这是 harness 能够插桩被测应用的前提。六、故障排查双端构建失败或环境报错按原文档指引优先对照 React Native 官方 Troubleshooting 文档排查Xcode 版本、Gradle/AGP 版本、JDK 版本是 RN 0.85 常见冲突点JS 改动不生效确认 Metro 的watchFolders是否覆盖 monorepo 根目录即本地库包源码修改是否被监视见 example/metro.config.jsReact 双实例告警确认SINGLETONS重定向未被移除且node_modules解析指向工作区根目录iOS 依赖问题更新原生依赖后忘记执行bundle exec pod install或npm run pods是最高频原因Web 页面白屏确认 HTML 壳加载的 bundle 路径为/index.bundle?platformweb且 Metro 已按platforms配置接受web平台解析若使用 Harness检查PROXY_PORT/HARNESS_METRO_URL是否指向实际在跑的 MetroHarness 超时bridgeTimeout默认 120000ms模拟器首次冷启动较慢时可检查defaultRunner指向的设备是否已启动。七、延伸阅读路径库本身的 API 与 Hook 文档packages/react-native-mmkv/src/index.ts、docs/HOOKS.md、docs/LISTENERS.md原生绑定与 Nitro Modules 生成物packages/react-native-mmkv/nitrogen、packages/react-native-mmkv/cpp/HybridMMKV.cpp版本迁移参考docs/V4_UPGRADE_GUIDE.md、docs/MIGRATE_FROM_ASYNC_STORAGE.md。以上所有命令均以在example/目录下执行为前提web:dev脚本内部使用bunx拉起 Metro如未安装 Bun 可先手动npm start再通过METRO_URL环境变量把脚本指向已有 Metro 实例。赞分享【免费下载链接】react-native-mmkv⚡️ The fastest key/value storage for React Native. ~30x faster than AsyncStorage!项目地址https://gitcode.com/gh_mirrors/re/react-native-mmkv点击查看免费下载相关推荐YouTube.js React Native 平台适配指南Polyfills、MMKV 缓存与 Metro 配置YouTube.js React Native 平台适配指南Polyfills、MMKV 缓存与 Metro 配置 让 YouTube.jsInnerTub后端终极指南如何使用React Native快速构建Umami移动应用终极指南如何使用React Native快速构建Umami移动应用 Umami是一款简单、快速且注重隐私的Google Analytics替代方案。本指南将带后端数据分析数据可视化前端React Native macOS RNTester 示例应用实战指南从源码运行、构建到集成测试React Native macOS RNTester 示例应用实战指南从源码运行、构建到集成测试 RNTester 是 React Native 官方用于展桌面应用跨平台上一篇Folly result 错误溯源机制深入解析epitaph墓志铭注解的用法与原理下一篇从设计到部署dev-resources全流程开发工具链详解创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考