React Native跨平台语音AI助手开发：OpenClaw Voice架构与实战

1. 项目概述OpenClaw Voice一个为移动端优化的语音优先AI助手客户端如果你和我一样经常在移动场景下需要与AI助手进行快速交互比如在通勤路上、散步时或者双手被占用时那么你肯定对在手机上打字输入感到过不便。传统的聊天应用需要你停下来点开输入框再慢慢敲字这个流程打断了思维的连续性。OpenClaw Voice这个项目正是为了解决这个痛点而生。它是一个基于React Native和Expo构建的跨平台客户端核心设计理念就是“语音优先”Voice-first让你能够通过“按住说话 - 实时转文字 - 编辑 - 发送 - 流式接收回复”这一套丝滑的流程在iOS和Android设备上与OpenClaw Gateway一个AI网关服务进行高效对话。简单来说它不是一个独立的AI模型而是一个功能强大且优雅的“前端”或“遥控器”。你为它配置好后端AI服务的接入点Gateway它就能为你提供一个专注于语音和快速交互的移动端体验。项目不仅提供了开箱即用的移动应用还将核心的网关连接、会话管理、消息流式接收等功能封装成了独立的openclaw-voicenpm包这意味着你可以轻松地将这套“语音对话工作流”集成到你自己的React Native或Web项目中。对于个人开发者或小团队而言这极大地降低了为AI服务构建高质量移动客户端的门槛。2. 核心架构与设计思路拆解2.1 为什么选择Expo React Native技术栈在移动端开发中我们通常面临一个选择是分别用Swift/Kotlin开发原生应用还是用跨平台方案。OpenClaw Voice选择了Expo React Native这是一个经过深思熟虑的决策主要基于以下几点考量开发效率与一致性项目的首要目标是快速在iOS和Android上实现一套以语音交互为核心的UI和业务逻辑。使用React Native我们可以用一套TypeScript代码管理大部分业务包括状态管理如连接状态、会话历史、设置、UI组件如消息气泡、录音按钮和网络通信WebSocket连接、流式响应处理。Expo在此基础上提供了更强大的开箱即用能力比如对expo-speech-recognition语音识别、expo-av音频录制等原生模块的封装让我们无需深入原生代码就能调用设备麦克风和语音转文本服务这正是一个语音优先应用的核心依赖。跨平台覆盖与特定优化虽然代码共享但项目并没有追求绝对的“一次编写到处运行”而是针对不同平台做了差异化设计。这正是其高明之处。例如在iOS上它充分利用了iOS系统优秀的语音识别性能和系统集成提供了完整的“按住录音”语音工作流。而在macOS上则明智地放弃了语音输入转向了“文本优先”的桌面级体验支持多网关连接、侧边栏导航、大尺寸输入框和丰富的键盘快捷键如CmdEnter发送。这种“核心共享体验定制”的思路既保证了开发效率又尊重了各平台用户的使用习惯。现代前端开发体验项目采用TypeScript 5.x提供了良好的类型安全这对于管理复杂的实时聊天状态连接、发送、流式接收、错误处理至关重要。通过Expo的现代工作流开发者可以享受热重载、通过QR码在真机上快速调试等便利。此外项目结构清晰将运行时状态runtime-state.ts、UI连线useAppPresentationWiring和业务逻辑连线useAppRuntimeWiring分离这种基于Reducer的状态管理思路使得应用的状态流转可预测、易于调试也方便编写集成测试如项目中的ios-runtime-integration.test.mjs。2.2 核心工作流从语音到AI回复的旅程理解OpenClaw Voice的核心就是理解一条用户消息如何从声波变成AI的回复并显示在屏幕上。这个过程涉及多个模块的精密协作语音捕获与转译用户按住屏幕上的录音按钮应用通过expo-speech-recognition模块开始监听麦克风。这里的一个关键细节是项目支持语音语言切换ja-JP/en-US这需要在开始识别前正确配置识别器。转译的文本会实时显示在输入框中提供“所见即所说”的反馈。编辑与发送松开按钮后语音识别停止转译完成的文本处于可编辑状态。用户可以在此进行手动修改、修正识别错误这是“语音优先”而非“语音唯一”理念的体现保留了用户最终的控制权。点击发送后应用进入Sending...状态。网关通信与身份认证应用通过GatewayClientSDK与配置好的OpenClaw Gateway建立安全的WebSocketwss://连接。这里涉及一个重要的安全概念本地设备身份。每次连接时客户端会使用Ed25519算法在本地生成或从持久化存储中读取一个密钥对并用它来对请求进行签名。这种机制确保了即使token泄露攻击者也无法冒充你的特定设备为个人使用增添了一层安全保障。GatewayClient会处理连接建立、认证、重连等底层细节。流式接收与渲染消息发送后Gateway开始流式返回AI的回复。客户端通过WebSocket逐块chunk接收数据并立即更新UI。这与等待整个回复完成再显示的传统方式相比显著降低了用户感知的延迟让对话感觉更实时、更自然。项目将回复的Markdown文本进行实时渲染可能使用了类似react-native-markdown-display的库并识别其中的URL进行链接化处理。状态同步与恢复整个过程中应用需要维护复杂的状态连接状态连接中、已连接、断开、发送状态等待、发送中、完成、错误、历史记录同步状态等。项目通过一套统一的Reducer状态机来管理这些变迁并处理网络不稳定的情况。例如历史记录刷新操作有20秒的超时保护防止因网络问题导致UI永远卡在“刷新中”。3. 多平台部署与实操要点3.1 环境准备与项目初始化要运行或开发OpenClaw Voice你需要一个配置好的本地环境。根据你的目标平台准备工作有所不同基础环境Node.js 18这是Expo和React Native的基石。建议使用nvm管理Node版本确保版本兼容。Git用于克隆代码库。一个可用的OpenClaw Gateway端点这是项目的“后端”。你需要一个类似wss://your-gateway.example.com的WebSocket地址以及相应的访问令牌token。这是项目运行的前提因为客户端本身不包含AI模型。iOS/macOS开发环境macOS电脑这是开发iOS应用的硬性要求。Xcode 15从Mac App Store安装并安装最新的iOS Simulator运行时。CocoaPodsiOS/macOS的依赖管理工具通过sudo gem install cocoapods安装。物理iOS设备可选但推荐用于测试语音识别等真机特有功能。需要在Xcode中登录你的Apple ID并配置好开发证书。Android开发环境Java Development Kit (JDK) 17Android Studio或独立安装。Android Studio安装时务必勾选Android SDK、Android SDK Platform-Tools和Android Virtual Device。环境变量这是Android开发中最常见的坑点。你必须正确设置ANDROID_HOME和ANDROID_SDK_ROOT。通常SDK的默认路径是~/Library/Android/sdkmacOS或C:\Users\你的用户名\AppData\Local\Android\SdkWindows。将其添加到你的shell配置文件如.zshrc或.bashrc中export ANDROID_HOME$HOME/Library/Android/sdk export ANDROID_SDK_ROOT$ANDROID_HOME export PATH$ANDROID_HOME/platform-tools:$ANDROID_HOME/emulator:$ANDROID_HOME/cmdline-tools/latest/bin:$PATH保存后执行source ~/.zshrc然后运行adb devices验证是否配置成功。完成上述准备后克隆项目并安装依赖git clone https://github.com/kyaukyuai/openclaw-voice.git cd openclaw-voice npm install npm run setup # 这个脚本通常会处理一些额外的原生依赖安装比如iOS的Pods注意首次运行npm run setup或任何iOS构建命令时可能会触发CocoaPods安装这需要时间且依赖网络状况。如果遇到CocoaPods相关错误尝试进入ios目录手动运行pod install --repo-update。3.2 在iOS真机与模拟器上运行OpenClaw Voice为iOS提供了调试Debug和发布Release两种运行模式它们的底层机制不同。调试模式需要Metro Metro是React Native的JavaScript打包器和开发服务器。在调试模式下应用代码运行在你的电脑Metro服务器上设备通过网络加载并执行这些代码从而实现热重载和快速迭代。启动Metro开发服务器npm run dev:metro # 或 npx expo start --dev-client终端会显示一个二维码和URL如exp://192.168.1.100:8081。在另一个终端构建并安装应用到设备# 连接到已连接的iPhone npm run ios:dev:device:install # 或者打开iOS模拟器 npm run ios:dev对于真机你需要确保电脑和手机在同一Wi-Fi网络下。安装后在手机上打开Expo Go应用调试版或已安装的开发版应用它应该会自动连接到Metro服务器。常见问题与解决“无法连接到开发服务器”这通常是因为设备无法访问Metro服务器的IP地址。首先确保电脑防火墙允许8081端口入站。然后在启动Metro时指定一个明确的IP或使用tunnel需要Expo账号npx expo start --dev-client --host tunnel --clear或者在安装应用时直接指定服务器URLEXPO_DEV_SERVER_URLhttp://你的电脑IP:8081 npm run ios:dev:device:open“无脚本URL提供”如果应用启动后白屏并报此错意味着Metro连接失败。请检查Metro服务器是否在运行并确认URL正确。发布模式无需Metro 发布模式会将JavaScript代码打包成一个index.bundle文件并嵌入到原生应用包中。这样应用就可以完全离线运行性能也更好适合最终测试和分发。npm run ios:release:device这个命令会执行一次完整的生产构建--configuration Release耗时较长但构建完成后应用启动速度更快且不依赖开发电脑。3.3 在macOS上运行两种形态项目支持两种在mac上运行的方式适应不同需求1. 作为iOS/iPad应用运行npm run ios:mac 这是通过Apple的“Mac Catalyst”技术将iOS应用直接移植到macOS上。运行此命令Xcode会为你生成一个macOS版本的应用。这种方式复用完全相同的iOS代码因此也包含了语音功能。它适合想在Mac上快速体验完整移动端功能的用户。构建时如果遇到签名问题如Provisioning profile ... doesnt include ... Mac需要在Xcode中打开项目在Signing Capabilities选项卡中为Mac版本选择或创建一个合适的开发团队证书。2. 运行原生macOS应用apps/macos-native 这是一个独立的、使用react-native-macos框架构建的真正的桌面应用。它的UI和交互针对大屏幕和键鼠操作进行了重新设计文本优先移除了语音输入专注于高效的键盘交互。多网关管理可以在侧边栏同时连接和管理多个不同的OpenClaw Gateway。桌面级快捷键支持CmdEnter发送、CmdR刷新历史、Esc取消等。独立的开发服务器默认使用8082端口与iOS的8081端口隔离避免冲突。运行它需要额外的引导步骤npm run macos:native:bootstrap # 安装原生依赖 npm run macos:native:start # 终端A启动Metro (端口8082) npm run macos:native:run # 终端B启动macOS应用3.4 在Android上运行Android环境的搭建相对繁琐但一旦配置好流程就很顺畅。环境检查首先运行npm run doctor:android这个脚本会检查JDK、Android SDK、环境变量等是否配置正确。根据提示修复任何问题。创建并启动模拟器如果你没有Android真机可以使用模拟器。npm run android:emulator:setup # 通常指创建AVD可能需手动在Android Studio中完成 npm run android:emulator:start # 启动模拟器建议在Android Studio的AVD Manager中创建一个基于x86_64或arm64-v8a的镜像并启用Hardware - GLES 2.0以获得更好的图形性能。运行应用确保模拟器已启动或真机已通过USB连接并启用调试模式然后运行npm run android这个命令会启动Metro服务器如果还没启动并构建安装APK到设备。实操心得Android开发中最常见的问题是SDK location not found。请反复确认ANDROID_HOME环境变量已设置且路径正确。另一个常见问题是端口冲突确保8081端口没有被其他程序占用。4. 深度使用作为SDK集成与定制开发OpenClaw Voice的核心价值之一是它将其与OpenClaw Gateway交互的能力抽象成了一个独立的npm包openclaw-voice。这意味着你可以不运行整个应用而是直接在你的JavaScript/TypeScript项目中使用这个客户端库。4.1 安装与基础使用在你的项目可以是Node.js后端服务、React Web应用或另一个React Native应用中安装npm install openclaw-voice基础使用示例import { GatewayClient, setStorage } from openclaw-voice; // 第一步可选但推荐配置持久化存储。 // 这能保证客户端重启后仍使用同一个设备身份避免重复配对。 // 以下是一个基于浏览器localStorage的示例在RN中你可能需要使用expo-secure-store或AsyncStorage。 setStorage({ getString: async (key: string): Promisestring | undefined { // 在实际RN项目中这里应使用安全的存储方案 const value localStorage.getItem(key); return value ?? undefined; }, set: async (key: string, value: string): Promisevoid { localStorage.setItem(key, value); }, }); // 第二步创建客户端实例 const client new GatewayClient( wss://your-openclaw-gateway.example.com, // 你的网关地址 { token: your-secret-gateway-token, // 网关认证令牌 clientId: my-custom-client, // 客户端标识可自定义 displayName: My Assistant App, // 在网关中显示的名称 role: operator, // 角色 scopes: [operator.read, operator.write], // 权限范围 caps: [talk], // 能力声明 } ); // 第三步监听事件 client.onConnectionStateChange((state) { console.log(连接状态变更:, state); // connecting, connected, disconnected, error }); client.onChatEvent((event) { console.log(会话[${event.sessionId}] 事件:, event.state, event.message); // event.state 可能是 waiting, streaming, done, error // event.message 包含消息内容、发送者等信息 }); // 第四步连接网关 await client.connect(); // 异步操作会进行身份认证和WebSocket握手 // 第五步发送消息 const result await client.chatSend(my-session-id, Hello, AI!); console.log(消息已发送运行ID:, result.runId); // 第六步断开连接可选 // client.disconnect();4.2 核心功能解析与高级用法设备身份与安全GatewayClient在首次连接时会在本地生成一个Ed25519密钥对。私钥永远不离开设备公钥会与clientId一起发送到网关进行注册。后续连接时客户端会用私钥对请求签名网关用预留的公钥验证。setStorage方法就是用来安全地保存这个密钥对的。重要在生产环境中务必使用安全的存储方案如React Native的expo-secure-store或react-native-async-storage/async-storage配合加密。会话管理chatSend方法的第一个参数是sessionId。你可以利用这个机制来隔离不同主题或上下文的对话。例如可以为“编程问题”、“日常聊天”、“工作备忘”创建不同的会话ID。客户端本身不管理会话列表这需要上层应用自己维护。流式响应处理onChatEvent回调是接收流式响应的核心。当event.state为streaming时event.message.content会逐步增长。你可以在UI上实时更新这部分内容创造打字机效果。当状态变为done时表示该轮回复已完整接收。这种设计让你能轻松构建出响应迅速的聊天界面。错误处理与重连客户端内置了基本的网络错误处理和重连逻辑。监听onConnectionStateChange可以获知连接状态。当网络不稳定时你可能需要实现自己的重试策略或UI提示。发送消息chatSend也可能失败务必用try...catch包裹或处理返回的Promise拒绝。4.3 在React Native/Expo项目中的集成要点如果你要在自己的Expo项目中集成openclaw-voice需要注意一些polyfill问题。# 在你的Expo项目中安装 npm install openclaw-voice由于SDK可能依赖一些在React Native环境中不默认存在的Web API如btoa/atob用于Base64或某些Crypto API你需要在应用入口处如app/_layout.tsx或index.js提前引入polyfill。// 在 app/_layout.tsx 或类似入口文件的最顶部 import react-native-get-random-values; // 如果需要可以引入一个base64 polyfill例如 // import { encode as btoa, decode as atob } from base-64; // global.btoa btoa; // global.atob atob; // 然后才是你的其他导入和组件 import { GatewayClient } from openclaw-voice;注意事项务必查阅openclaw-voice包的具体文档或源码确认其所需的polyfill。最好的方式是先进行简单的连接测试根据控制台报错信息来添加相应的polyfill。5. 项目配置、调试与发布流程5.1 环境变量与配置管理项目使用Expo的环境变量来管理不同环境的配置。这避免了将敏感信息硬编码在代码中。复制环境变量模板文件cp .env.example .env编辑.env文件填入你自己的配置EXPO_PUBLIC_DEFAULT_GATEWAY_URLwss://your-real-gateway.com EXPO_PUBLIC_DEFAULT_THEMEdark # 或 light EXPO_PUBLIC_DEFAULT_SESSION_KEYmain EXPO_PUBLIC_GATEWAY_CLIENT_IDmy-app-client EXPO_PUBLIC_GATEWAY_DISPLAY_NAMEMy OpenClaw EXPO_PUBLIC_DEBUG_MODEfalse # 开发时可设为true以显示调试面板安全警告.env文件应被加入.gitignore切勿提交包含真实令牌和URL的.env文件到版本库。这些以EXPO_PUBLIC_为前缀的变量会在构建时被Expo静态地嵌入到JavaScript包中因此在运行时可以通过process.env.EXPO_PUBLIC_*来访问。对于更敏感的数据如网关token不应使用环境变量而应考虑在应用首次启动时让用户输入或通过安全的移动端配置服务下发。5.2 本地质量检查与测试在提交代码或发布前运行一套完整的本地检查是保证质量的关键。项目提供了完善的脚本# 1. 类型检查确保TypeScript代码没有类型错误 npm run typecheck # 2. 代码风格检查使用ESLint统一代码风格 npm run lint # 3. 运行单元测试和集成测试 npm test # 或者运行一次性的测试 npm test -- --watchfalse # 4. 模拟发布流程打包SDK并尝试本地安装验证包的有效性 npm run smoke:pack-install # 如果网络问题导致npm install失败可以跳过安装步骤 OPENCLAW_SMOKE_SKIP_INSTALL1 npm run smoke:pack-installiOS运行时稳定性回归检查由于项目采用了复杂的Reducer状态管理在修改了核心运行时逻辑src/ios-runtime/下的文件后建议手动进行以下场景测试这些是用户最常遇到问题的环节完整对话流程连接网关 - 发送一条消息 - 成功接收完整回复。确保界面不会卡在Sending...状态。手动刷新历史点击刷新按钮等待历史记录加载完成状态应从Refreshing...正确返回。网络重连在应用运行时切换设备网络如开启飞行模式再关闭检查应用是否能自动重连或手动重连/断开功能是否正常。键盘交互在输入时弹出键盘确保键盘不会遮挡最新的历史消息。会话切换在多个会话间切换检查输入框的草稿和快速文本功能是否按预期工作。5.3 发布npm包流程将openclaw-voiceSDK发布到npm registry供其他人使用是一个标准但需要谨慎的操作。自动化发布推荐 项目配置了GitHub Actions工作流当推送特定格式的Git标签如v1.0.1时会自动执行测试、构建并发布到npm。确保NPM_TOKEN在GitHub仓库的Settings - Secrets and variables - Actions中添加名为NPM_TOKEN的密钥其值为你在npmjs.com上生成的访问令牌需要有发布权限。升级版本号npm version patch -m chore(release): %s # 升级修订号 (x.y.Z) # 或 npm version minor # 升级次版本号 (x.Y.z) # 或 npm version major # 升级主版本号 (X.y.z)这个命令会更新package.json中的version字段并创建一个提交。推送提交和标签git push git push --tags推送v*标签会触发Release工作流该流程会运行所有验证步骤类型检查、lint、测试、安全扫描等通过后自动执行npm publish。手动发布 如果自动化流程有问题也可以手动发布# 1. 手动更新版本号不创建git标签 npm version patch --no-git-tag-version # 2. 提交版本变更 git add package.json package-lock.json git commit -m chore(release): bump version to x.y.z # 3. 执行发布。npm会触发package.json中定义的prepack和postpack钩子。 # prepack构建TypeScript源码到dist目录并临时修改package.json的main字段指向构建产物。 # postpack恢复package.json到原始状态指向index.ts方便开发。 npm publish --access public # 4. 创建并推送Git标签便于版本管理 git tag vX.Y.Z git push origin main git push origin vX.Y.Z发布前检查清单运行npm run doctor:release如果存在进行预检。确保CHANGELOG.md如果维护了已更新。确认所有新功能都已文档化。在干净的main分支上进行发布操作。6. 常见问题排查与实战技巧6.1 连接与网络问题问题现象可能原因排查步骤与解决方案应用启动后一直显示“连接中”或快速失败1. Gateway URL或Token错误。2. 网络不通防火墙、代理。3. Gateway服务未运行。1. 检查.env中的EXPO_PUBLIC_DEFAULT_GATEWAY_URL和代码中的token是否正确确保是wss://开头。2. 尝试在电脑浏览器中访问Gateway的HTTP健康检查端点如果有或使用wscat等工具测试WebSocket连接。3. 检查后端服务日志。在移动数据网络下无法连接Wi-Fi下正常运营商或设备移动网络限制了WebSocket端口通常为443。确保Gateway使用标准的WSS端口443。检查是否有特殊的APN设置或VPN需求。连接时出现SSL证书错误自签名证书或证书链不完整。在开发环境中可以让Gateway使用由受信任CA签发的证书如Let‘s Encrypt。对于自签名证书在iOS/Android开发中处理非常复杂不推荐在生产应用中使用。消息发送后长时间无响应1. Gateway处理超时。2. 网络延迟高或丢包。3. 客户端流式响应解析出错。1. 查看Gateway服务端日志确认请求是否收到及处理状态。2. 在客户端开启EXPO_PUBLIC_DEBUG_MODEtrue查看网络请求和响应详情。3. 检查客户端onChatEvent回调是否被正确触发。6.2 平台特定的构建与运行问题iOS/macOS构建失败CocoaPods could not find compatible versions运行cd ios pod install --repo-update并确保你的Ruby环境稳定。有时需要清理Pod缓存pod cache clean --all。签名错误在Xcode中打开openclaw-voice/ios目录下的.xcworkspace文件在Signing Capabilities中为OpenClawVoice和macOSTarget选择合适的Team。对于真机调试需在Apple Developer网站注册设备UDID。ios:mac构建失败确保Xcode版本支持Mac Catalyst并且macOS部署目标设置正确。尝试清理构建npm run ios:mac -- --clean如果脚本支持或手动在Xcode中Product - Clean Build Folder。Android构建失败SDK location not found这是最高频的问题。请严格按照前文所述在~/.zshrc或~/.bash_profile中设置ANDROID_HOME和ANDROID_SDK_ROOT环境变量并source使其生效。然后重启终端或IDE。Could not install the app on the device确保只有一个设备/模拟器在线。尝试adb kill-server adb start-server。如果是模拟器确保它已完全启动。Execution failed for task :app:installDebug可能是旧版本应用冲突。尝试卸载设备上的现有应用或运行./gradlew clean在android目录下。Metro服务器问题Metro报Unable to resolve module删除node_modules和package-lock.json重新运行npm install。有时也需要清除Metro缓存npx expo start --clear。设备无法加载JS Bundle检查电脑和手机是否在同一网络。尝试关闭电脑防火墙或使用--host tunnel选项需Expo账号。对于真机确保Expo Go或开发版应用有本地网络权限。6.3 音视频与权限问题语音识别不工作iOS/Android检查权限应用必须获得麦克风权限。首次使用录音功能时系统会弹出请求。如果用户拒绝了需要在系统设置中手动打开。可以在代码中添加权限请求逻辑。检查语言设置确认语音识别器配置的语言ja-JP,en-US是设备支持的语言。真机测试iOS模拟器不支持语音识别必须在真机上测试。音频播放问题如果项目后续集成了语音回复TTS需要处理音频会话iOS和音频焦点Android避免与其他应用音频冲突。6.4 性能与优化建议列表渲染性能聊天历史是一个增长很快的列表。确保使用React Native的FlatList或FlashList来渲染消息并为每条消息提供稳定的key如message.id。避免在渲染函数中进行复杂计算。流式响应渲染频繁更新一个很长的Markdown文本可能导致UI卡顿。可以考虑将流式内容分块或使用setNativeProps进行优化但需谨慎。项目中对极长的Markdown进行截断是合理的保护措施。内存管理长时间运行后特别是会话历史很多时注意内存使用。可以考虑实现历史记录的分页加载或本地数据库存储如SQLite而不是全部保存在内存状态中。网络状态感知在弱网环境下增加更明显的连接状态提示和发送失败的重试机制。可以利用NetInfoAPI监听网络变化。6.5 安全最佳实践网关端点安全绝对不要将未受保护的OpenClaw Gateway端口直接暴露在公网。推荐的做法是在服务器上通过Tailscale或WireGuard组建虚拟私有网络然后使用Cloudflare Tunnel或带认证的反向代理如Nginx with Basic Auth将服务安全地暴露出来。令牌管理不要在客户端代码或仓库中硬编码Gateway token。让用户在应用内输入或通过安全的移动端配置服务如Firebase Remote Config但需加密动态获取。依赖安全定期运行npm audit和npm outdated更新有安全漏洞的依赖。项目通过package.json的overrides字段锁定markdown-it版本就是为了避免引入有漏洞的间接依赖。本地存储设备身份密钥对是核心敏感信息。在React Native中务必使用expo-secure-storeiOS Keychain/Android Keystore进行存储而不是普通的AsyncStorage。