使用 Expo、导航模式、原生模块和离线优先同步来架构 React Native 应用。本技能提供构建跨平台移动应用的生产级模式。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“react-native-architecture”。 创建带路由保护的 auth provider
预期结果:
使用 SecureStore 存储令牌的 AuthContext，useAuth hook，检查 segments 的路由守卫，未认证时重定向到登录页
正在使用“react-native-architecture”。 设置离线优先 React Query
预期结果:
带 AsyncStorage persister 的 QueryProvider，networkMode: offlineFirst，gcTime: 24 小时，staleTime: 5 分钟
正在使用“react-native-architecture”。 为 iOS 配置 EAS build
预期结果:
包含 development、preview 和 production 配置文件的 eas.json。development 使用模拟器，preview 使用内部分发，production 启用 autoIncrement
安全审计
安全Security audit complete. Static findings are false positives triggered by documentation examples containing terminal commands (npx, eas), documentation URLs (official Expo/React Native sites), and example configuration paths. No actual code execution, network requests to external domains, or real credentials present. Skill is a legitimate React Native architecture guide with safe-to-use code patterns.
风险因素
质量评分
你能构建什么
启动新的移动项目
初始化新的 Expo 项目，采用适当的架构、TypeScript 和导航设置，遵循行业最佳实践。
实现身份验证流程
通过路由守卫、SecureStore 令牌存储和受保护导航路径添加安全身份验证。
添加离线优先数据层
使用 React Query、AsyncStorage 同步和乐观 UI 更新实现持久数据缓存。
试试这些提示
使用 TypeScript 创建新的 Expo 项目。设置包含 app/、components/、hooks/、services/、stores/ 和 types/ 目录的文件夹结构。包含带 auth 和 tabs 组的 Expo Router。
在 React Native 应用中使用 SecureStore 存储令牌实现身份验证流程。创建包含 signIn、signOut 和用户状态的 auth context。添加路由守卫以保护标签页免受未认证访问。
使用 AsyncStorage persister 设置 React Query 以实现离线优先数据。包含使用 NetInfo 的网络状态检测，并为生产使用配置 stale times 和重试逻辑。
使用 expo-local-authentication 添加生物识别认证，使用 expo-notifications 添加推送通知，使用 expo-haptics 添加触觉反馈。为每个功能创建清晰的服务抽象。
最佳实践
- 使用 Expo Router 基于文件的路由，通过组分离 auth 和 tabs
- 对组件使用 memoize，对长列表使用 FlashList 以保持 60fps
- 将令牌和敏感数据存储在 SecureStore 中，切勿存储在 AsyncStorage 中
避免
- 将令牌或机密存储在普通 AsyncStorage 而不是 SecureStore 中
- 使用内联样式而不是 StyleSheet.create 影响性能
- 在组件渲染中直接获取数据而不使用 useEffect 或 React Query