Back to Details

expo-react-native-coder

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Expo React Native Coder Best Practices

Expo React Native 开发者最佳实践

Comprehensive feature development guide for Expo React Native applications. Contains 50 rules across 10 categories, covering everything from project setup to testing. Includes production-ready code templates for common features.
这是一份针对Expo React Native应用的全面功能开发指南，涵盖从项目搭建到测试的10个类别共50条规则，包含适用于常见功能的生产级代码模板。

When to Apply

适用场景

Reference these guidelines when:
  • Setting up a new Expo project with TypeScript
  • Building navigation with Expo Router (tabs, stacks, drawers, modals)
  • Creating screens (list, detail, form, settings)
  • Implementing authentication flows with protected routes
  • Configuring deep linking and universal links
在以下场景中可参考本指南：
  • 使用TypeScript搭建新的Expo项目
  • 利用Expo Router构建导航（标签页、栈、抽屉、模态框）
  • 创建各类界面（列表页、详情页、表单页、设置页）
  • 实现带受保护路由的身份验证流程
  • 配置深度链接和通用链接

Rule Categories by Priority

按优先级划分的规则类别

PriorityCategoryImpactPrefix
1Project Setup & ConfigurationCRITICAL
setup-
2Routing & NavigationCRITICAL
route-
3Screen Patterns & LayoutsHIGH
screen-
4Data Fetching & StateHIGH
data-
5Authentication & SecurityHIGH
auth-
6Deep Linking & Universal LinksHIGH
link-
7Native UX PatternsMEDIUM-HIGH
ux-
8Forms & User InputMEDIUM
form-
9Assets & ThemingMEDIUM
asset-
10Error Handling & TestingMEDIUM
test-
优先级类别影响程度前缀
1项目搭建与配置关键
setup-
2路由与导航关键
route-
3界面模式与布局高
screen-
4数据获取与状态管理高
data-
5身份验证与安全高
auth-
6深度链接与通用链接高
link-
7原生UX模式中高
ux-
8表单与用户输入中
form-
9资源与主题中
asset-
10错误处理与测试中
test-

Quick Reference

快速参考

1. Project Setup & Configuration (CRITICAL)

1. 项目搭建与配置（关键）

  • setup-typescript-config
     - Configure TypeScript with strict mode
  • setup-app-config-typescript
     - Use typed app.config.ts
  • setup-environment-variables
     - EXPO_PUBLIC_ prefix for client vars
  • setup-eas-build-profiles
     - EAS build profiles per environment
  • setup-development-build
     - Development builds vs Expo Go
  • 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. Routing & Navigation (CRITICAL)

2. 路由与导航（关键）

  • route-file-based-routing
     - File-based routing with Expo Router
  • route-tab-navigator
     - Tab navigator with route groups
  • route-dynamic-segments
     - Dynamic route segments [param]
  • route-stack-within-tabs
     - Nested stack in tabs
  • route-modal-presentation
     - Modal screen presentation
  • route-typed-routes
     - Enable typed routes
  • route-drawer-navigator
     - Drawer navigator setup
  • 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 Patterns & Layouts (HIGH)

3. 界面模式与布局（高）

  • screen-list-flashlist
     - FlashList for large lists
  • screen-detail-params
     - Pass minimal data via params
  • screen-loading-state
     - Loading and error states
  • screen-pull-to-refresh
     - Pull-to-refresh pattern
  • screen-header-options
     - Configure screen headers
  • screen-settings-list
     - Settings screen with SectionList
  • screen-list-flashlist
     - 使用FlashList处理大型列表
  • screen-detail-params
     - 通过参数传递最小化数据
  • screen-loading-state
     - 加载与错误状态处理
  • screen-pull-to-refresh
     - 下拉刷新模式
  • screen-header-options
     - 配置界面头部选项
  • screen-settings-list
     - 使用SectionList实现设置界面

4. Data Fetching & State (HIGH)

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

  • data-api-routes
     - Server-side API routes
  • data-secure-store
     - SecureStore for sensitive data
  • data-sqlite-local
     - SQLite for complex local data
  • data-fetch-on-focus
     - Refetch on screen focus
  • data-async-storage-simple
     - AsyncStorage for preferences
  • data-abort-controller
     - Cancel fetch on unmount
  • 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. Authentication & Security (HIGH)

5. 身份验证与安全（高）

  • auth-protected-routes
     - Stack.Protected guards
  • auth-context-provider
     - Auth context with session
  • auth-oauth-flow
     - OAuth with AuthSession
  • auth-login-form
     - Login form with validation
  • auth-splash-loading
     - Splash screen during auth check
  • auth-protected-routes
     - 使用Stack.Protected守卫
  • auth-context-provider
     - 带会话的身份验证上下文
  • auth-oauth-flow
     - 使用AuthSession实现OAuth流程
  • auth-login-form
     - 带验证的登录表单
  • auth-splash-loading
     - 身份验证检查时的启动屏

6. Deep Linking & Universal Links (HIGH)

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

  • link-deep-linking-scheme
     - Custom URL scheme
  • link-universal-links-ios
     - iOS Universal Links
  • link-android-app-links
     - Android App Links
  • link-handle-incoming
     - Handle incoming URLs
  • link-deep-linking-scheme
     - 自定义URL协议
  • link-universal-links-ios
     - iOS通用链接
  • link-android-app-links
     - Android应用链接
  • link-handle-incoming
     - 处理传入的URL

7. Native UX Patterns (MEDIUM-HIGH)

7. 原生UX模式（中高）

  • ux-safe-area-insets
     - SafeAreaView for notches
  • ux-status-bar
     - Status bar styling
  • ux-haptic-feedback
     - Haptic feedback on actions
  • ux-gesture-handler
     - Gesture handler for swipes
  • ux-keyboard-avoiding
     - KeyboardAvoidingView
  • ux-safe-area-insets
     - 使用SafeAreaView适配刘海屏
  • ux-status-bar
     - 状态栏样式设置
  • ux-haptic-feedback
     - 操作时的触觉反馈
  • ux-gesture-handler
     - 滑动操作的手势处理器
  • ux-keyboard-avoiding
     - 使用KeyboardAvoidingView

8. Forms & User Input (MEDIUM)

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

  • form-text-input-config
     - TextInput keyboard types
  • form-controlled-inputs
     - Controlled inputs with useState
  • form-submit-button-state
     - Disable button during submit
  • form-dismiss-keyboard
     - Dismiss keyboard on tap outside
  • form-text-input-config
     - TextInput键盘类型配置
  • form-controlled-inputs
     - 使用useState实现受控输入
  • form-submit-button-state
     - 提交过程中禁用按钮
  • form-dismiss-keyboard
     - 点击外部时收起键盘

9. Assets & Theming (MEDIUM)

9. 资源与主题（中）

  • asset-image-optimization
     - expo-image for caching
  • asset-font-loading
     - Load fonts with useFonts
  • asset-vector-icons
     - @expo/vector-icons
  • asset-splash-screen
     - Splash screen configuration
  • asset-image-optimization
     - 使用expo-image实现缓存
  • asset-font-loading
     - 使用useFonts加载字体
  • asset-vector-icons
     - @expo/vector-icons使用
  • asset-splash-screen
     - 启动屏配置

10. Error Handling & Testing (MEDIUM)

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

  • test-jest-setup
     - Jest with jest-expo preset
  • test-component-testing
     - Testing Library for components
  • test-error-boundary
     - Error boundaries
  • test-e2e-maestro
     - Maestro E2E testing
  • test-jest-setup
     - 使用jest-expo预设配置Jest
  • test-component-testing
     - 使用Testing Library测试组件
  • test-error-boundary
     - 错误边界实现
  • test-e2e-maestro
     - 使用Maestro进行端到端测试

Code Templates

代码模板

Production-ready templates are available in 
assets/templates/
:
TemplateDescription
layouts/tab-layout.tsx
Bottom tab navigator with icons
layouts/auth-layout.tsx
Root layout with protected routes
screens/list-screen.tsx
List with FlashList, refresh, states
screens/detail-screen.tsx
Detail screen with param handling
screens/form-screen.tsx
Form with validation, keyboard handling
hooks/use-auth.tsx
Auth context with SecureStore
components/error-boundary.tsx
Error boundary component
生产级模板可在
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
错误边界组件

How to Use

使用方法

Read individual reference files for detailed explanations and code examples:
  • Section definitions - Category structure and impact levels
  • Rule template - Template for adding new rules
阅读单个参考文件获取详细说明和代码示例：
  • 章节定义 - 类别结构与影响级别
  • 规则模板 - 添加新规则的模板

Full Compiled Document

完整编译文档

For a single comprehensive document with all rules, see AGENTS.md.
如需包含所有规则的单一综合文档，请查看AGENTS.md。

Reference Files

参考文件

FileDescription
AGENTS.mdComplete compiled guide with all rules
references/_sections.mdCategory definitions and ordering
assets/templates/Production-ready code templates
metadata.jsonVersion and reference information
文件描述
AGENTS.md包含所有规则的完整编译指南
references/_sections.md类别定义与排序
assets/templates/生产级代码模板
metadata.json版本与参考信息