mcpField
R
react-native

react-native

github.com/oakoss开发21111 次安装12 周前更新
代码仓库

关于 react-native

面向 React Native 移动应用开发的 Expo 技能，介绍如何用 TypeScript 构建 iOS、Android 及 Web 应用。内容覆盖文件路由、云端构建与更新，以及摄像头和通知等原生设备 API。

主要功能

  1. 01使用 Expo Router 配置文件路由
  2. 02通过 EAS 构建并提交应用
  3. 03发布 JavaScript OTA 更新
  4. 04集成摄像头、通知和触觉模块
  5. 05处理平台差异与原生模块

适用场景

  1. 01开发 iOS 与 Android 应用
  2. 02构建支持 Web 的通用应用
  3. 03为应用商店配置构建和提交流程
  4. 04集成相机或推送通知功能

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/oakoss/agent-skills --skill react-native

安装后在 Claude Code 中输入/react-native确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
app-configuration.md
core-patterns.md
device-apis.md
eas-workflows.md
expo-router.md
native-modules.md
nativewind.md
performance-patterns.md

详细介绍

使用 Expo 的 React Native

概述

Expo 是一个开源框架，可使用单一 TypeScript 代码库，通过 React Native 构建通用原生应用。它提供基于文件的路由（Expo Router）、云构建服务（EAS Build/Submit/Update）以及丰富的原生模块，用于访问设备 API。

适用场景： 面向 iOS 和 Android 的移动应用、支持 Web 的通用应用、需要 OTA 更新的项目、需要使用原生设备 API（相机、通知、触觉反馈）的应用，以及偏好托管基础设施而非纯 React Native 的团队。

不适用场景： 需要大量与 Expo Modules API 不兼容的自定义原生代码的应用、需要集成到现有原生应用中的棕地项目，以及有原生专属 CI/CD 要求的应用。

快速参考

模式API重点
Stack 导航expo-router 中的 <Stack>基于文件，_layout.tsx 定义导航器
Tab 导航expo-router 中的 <Tabs>使用 (tabs) 目录组和 _layout.tsx
Drawer 导航expo-router/drawer 中的 <Drawer>需要 @react-navigation/drawer
类型化路由使用 /(group)/route 的 href在 app.json 中启用 typed-routes
开发构建expo-dev-client自定义原生代码 + 开发工具
EAS Buildeas build --profile production为应用商店进行云构建
EAS Submiteas submit -p ios / -p android自动提交到应用商店
OTA 更新eas update --branch production仅更新 JS，无需重新构建
原生模块Expo Modules API使用 expo-module.config.json 的 Swift/Kotlin
平台代码Platform.select() / .ios.tsx按平台编写逻辑或整个文件
样式化列表FlatList / FlashList虚拟化列表，需要 keyExtractor
相机expo-camera通过 useCameraPermissions() 获取权限
通知expo-notifications通过 getExpoPushTokenAsync() 获取推送令牌
触觉反馈expo-hapticsimpactAsync、notificationAsync
Tailwind（RN）NativeWind v4使用 className 属性，在 RN 中使用 Tailwind CSS

常见错误

错误正确做法
直接使用 react-navigation，而不是 Expo RouterExpo Router 使用基于文件的路由封装 React Navigation
忘记在路由目录中添加 _layout.tsx每个包含路由的目录都需要布局文件
使用 expo start 运行自定义原生代码使用 expo-dev-client 搭配 expo start --dev-client
原生依赖项发生更改后运行 eas update原生更改需要运行 eas build，OTA 仅适用于 JS
使用 if 硬编码平台检查使用 Platform.select() 或平台专属的文件扩展名
访问设备 API 前未请求权限使用相机、通知前，务必检查／请求权限
长列表使用 ScrollView使用 FlatList 或 FlashList 进行虚拟化渲染
在渲染函数中使用内联样式在组件外部使用 StyleSheet.create() 定义样式
FlatList 缺少 keyExtractor务必提供 keyExtractor，以确保列表稳定渲染
使用 react-native 导入 Expo 提供的 API优先使用 expo-* 包，而不是 react-native 对应项

委派

  • 模式探索：使用 Explore Agent
  • 构建／部署审查：使用 Task Agent
  • 代码审查：委派给 code-reviewer Agent

如果有 react-patterns 技能，请将 React 组件模式和 hooks 委派给它。 如果有 tanstack-query 技能，请将数据获取和缓存委派给它。 如果有 zustand 技能，请将客户端状态管理委派给它。 如果有 vitest-testing 技能，请将单元测试和组件测试模式委派给它。 如果有 tailwind 技能，请将 Tailwind CSS 实用工具模式委派给它（NativeWind 使用 Tailwind CSS 语法）。 如果有 accessibility 技能，请将移动端无障碍模式委派给它。

参考资料

评论

支持 Markdown