react-native-dev
构建 React Native 和 Expo 应用
使用 React Native 构建移动应用需要处理组件、状态管理、动画和部署方面的复杂选择。本技能提供结构化的开发指南，包含经过验证的模式、推荐库和适用于 Expo 和 React Native 项目的生产级示例。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“react-native-dev”。 使用 Expo Router 创建带有 Home、Search 和 Profile 标签的标签页导航布局。
预期结果:
- 标签页布局文件 (app/(tabs)/_layout.tsx)，使用 expo-router 的 Tabs 组件
- 三个标签页定义，带 Ionicons 图标
- 支持大标题样式的头部配置和样式化头部
- 单独的路由文件：app/(tabs)/home.tsx、app/(tabs)/search.tsx、app/(tabs)/profile.tsx
正在使用“react-native-dev”。 展示如何使用 Zustand 的 persist 中间件来管理用户偏好设置。
预期结果:
- 使用 create 和 persist 中间件的 Zustand store 定义
- 类型安全的 state 接口，包含主题、语言和通知设置
- 组件中的选择器模式用法以防止不必要的重新渲染
- 使用 MMKV 或 AsyncStorage 的存储后端配置
安全审计
安全This skill is a documentation-only reference guide for React Native and Expo development. It contains 12 markdown files (SKILL.md plus 11 reference files) with code examples. All 740 static analysis findings are false positives: the scanner misidentified markdown code blocks (triple-backtick fenced examples) as executable code. Patterns flagged include shell commands in installation instructions, relative imports shown as code examples, environment variable usage in documentation, and documentation references to .env files. No executable code exists in this skill.
风险因素
质量评分
你能构建什么
从头开始创建新的 Expo 项目
开发者需要搭建一个生产级的 React Native 应用，具备正确的项目结构、路由、状态管理和 CI/CD 流水线。
实现复杂的动画和手势
开发者需要使用 Reanimated 3 和 Gesture Handler 添加流畅的动画、手势处理和滚动驱动效果。
优化应用性能并准备发布
团队需要分析应用性能、修复滚动卡顿、减小 bundle 大小、配置 EAS 构建，并为 App Store 和 Play Store 部署设置 CI/CD。
试试这些提示
使用 TypeScript 设置新的 Expo 项目。包含 Expo Router 导航和标签页布局、FlashList 列表、expo-image 图片和 Zustand 状态管理。展示推荐的项目结构。
使用 React Hook Form 和 Zod 验证创建登录表单。包含邮箱和密码字段及错误信息、带加载状态的提交按钮，以及使用 fetch 包装器的 API 集成。
使用 Reanimated 3 在列表页面和详情页面之间实现共享元素过渡。列表使用带有备忘录化项的 FlashList。点击项目时，通过淡入和缩放过渡动画将其动画化到详情页面。
使用 GitHub Actions 设置 EAS Build 和 Submit 流水线。包含开发和生产的独立构建配置、主分支合并时自动提交到应用商店，以及不同阶段的环境变量管理。
最佳实践
- 始终使用 FlashList 而不是 FlatList 作为列表，使用 expo-image 而不是 RN Image 以获得更好的性能和缓存
- 只使用 Reanimated 动画 transform 和 opacity 属性，以保持动画 GPU 合成并避免布局重新计算
- 使用 EXPO_PUBLIC_ 前缀处理客户端环境变量，并在 API 路由中不使用前缀地保留纯服务端密钥
避免
- 在生产环境的列表和图片画廊中使用 FlatList 而不使用备忘录化项，或使用 RN Image 而不使用缓存
- 从桶文件（index.ts）导入会增加 bundle 大小——始终直接从源模块导入
- 使用 Platform.OS 而不是 process.env.EXPO_OS 进行平台检查，使用 useContext 而不是 React.use（React 18）