⚡

ExpoReactNative开发技能Skill expo-react-native-coder

这个技能提供全面的Expo React Native移动应用开发指南，涵盖项目设置、路由导航、屏幕开发、数据管理、认证安全、深度链接等关键领域。适用于前端开发者和移动应用开发者，帮助快速构建高性能的Expo应用。关键词：Expo, React Native, 移动开发, 前端开发, 导航, 认证, 深度链接。

移动开发 0 次安装 0 次浏览更新于 3/18/2026

名称：expo-react-native-coder 描述：全面的Expo React Native功能开发指南。这个技能应在构建移动应用屏幕、导航、数据获取、认证、深度链接或使用Expo的原生UX模式时使用。触发于涉及Expo Router、React Native组件、移动表单或应用配置的任务。

Expo React Native 编码最佳实践

全面的Expo React Native应用功能开发指南。包含10个类别的50条规则，涵盖从项目设置到测试的所有内容。包括常见功能的生产就绪代码模板。

何时应用

参考这些指南当：

使用TypeScript设置新的Expo项目
使用Expo Router构建导航（标签、堆栈、抽屉、模态）
创建屏幕（列表、详情、表单、设置）
实现认证流程与受保护路由
配置深度链接和通用链接

按优先级分类的规则类别

优先级	类别	影响	前缀
1	项目设置与配置	关键	`setup-`
2	路由与导航	关键	`route-`
3	屏幕模式与布局	高	`screen-`
4	数据获取与状态	高	`data-`
5	认证与安全	高	`auth-`
6	深度链接与通用链接	高	`link-`
7	原生UX模式	中高	`ux-`
8	表单与用户输入	中	`form-`
9	资产与主题	中	`asset-`
10	错误处理与测试	中	`test-`

快速参考

1. 项目设置与配置（关键）

setup-typescript-config - 配置严格模式的TypeScript
setup-app-config-typescript - 使用类型化的app.config.ts
setup-environment-variables - 客户端变量使用EXPO_PUBLIC_前缀
setup-eas-build-profiles - 每个环境的EAS构建配置文件
setup-development-build - 开发构建与Expo Go

2. 路由与导航（关键）

route-file-based-routing - 使用Expo Router进行基于文件的路由
route-tab-navigator - 带路由组的标签导航器
route-dynamic-segments - 动态路由段 [param]
route-stack-within-tabs - 标签内的嵌套堆栈
route-modal-presentation - 模态屏幕展示
route-typed-routes - 启用类型化路由
route-drawer-navigator - 抽屉导航器设置

3. 屏幕模式与布局（高）

screen-list-flashlist - 用于大型列表的FlashList
screen-detail-params - 通过参数传递最小数据
screen-loading-state - 加载和错误状态
screen-pull-to-refresh - 下拉刷新模式
screen-header-options - 配置屏幕标题
screen-settings-list - 使用SectionList的设置屏幕

4. 数据获取与状态（高）

data-api-routes - 服务器端API路由
data-secure-store - 敏感数据的SecureStore
data-sqlite-local - 复杂本地数据的SQLite
data-fetch-on-focus - 屏幕焦点时重新获取
data-async-storage-simple - 偏好的AsyncStorage
data-abort-controller - 卸载时取消获取

5. 认证与安全（高）

auth-protected-routes - Stack.Protected防护
auth-context-provider - 带会话的认证上下文
auth-oauth-flow - 使用AuthSession的OAuth
auth-login-form - 带验证的登录表单
auth-splash-loading - 认证检查期间的启动屏幕

6. 深度链接与通用链接（高）

link-deep-linking-scheme - 自定义URL方案
link-universal-links-ios - iOS通用链接
link-android-app-links - Android应用链接
link-handle-incoming - 处理传入URL

7. 原生UX模式（中高）

ux-safe-area-insets - 用于缺口的SafeAreaView
ux-status-bar - 状态栏样式
ux-haptic-feedback - 操作时的触觉反馈
ux-gesture-handler - 滑动手势的手势处理器
ux-keyboard-avoiding - KeyboardAvoidingView

8. 表单与用户输入（中）

form-text-input-config - TextInput键盘类型
form-controlled-inputs - 使用useState的受控输入
form-submit-button-state - 提交期间禁用按钮
form-dismiss-keyboard - 点击外部时关闭键盘

9. 资产与主题（中）

asset-image-optimization - 用于缓存的expo-image
asset-font-loading - 使用useFonts加载字体
asset-vector-icons - @expo/vector-icons
asset-splash-screen - 启动屏幕配置

10. 错误处理与测试（中）

test-jest-setup - 使用jest-expo预设的Jest
test-component-testing - 组件的测试库
test-error-boundary - 错误边界
test-e2e-maestro - Maestro E2E测试

代码模板

生产就绪的模板可在assets/templates/中找到：

模板	描述
`layouts/tab-layout.tsx`	带图标的底部标签导航器
`layouts/auth-layout.tsx`	带受保护路由的根布局
`screens/list-screen.tsx`	带FlashList、刷新、状态的列表
`screens/detail-screen.tsx`	带参数处理的详情屏幕
`screens/form-screen.tsx`	带验证、键盘处理的表单
`hooks/use-auth.tsx`	带SecureStore的认证上下文
`components/error-boundary.tsx`	错误边界组件

如何使用

阅读单个参考文件以获取详细解释和代码示例：

部分定义 - 类别结构和影响级别
规则模板 - 添加新规则的模板

完整编译文档

有关所有规则的单一综合文档，请参见AGENTS.md。

参考文件

文件	描述
AGENTS.md	包含所有规则的完整编译指南
references/_sections.md	类别定义和排序
assets/templates/	生产就绪代码模板
metadata.json	版本和参考信息