Back to Details

react-native

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

React Native with Expo

基于Expo的React Native

Overview

概述

Expo is an open-source framework for building universal native apps with React Native from a single TypeScript codebase. It provides file-based routing (Expo Router), cloud build services (EAS Build/Submit/Update), and a rich set of native modules for device APIs.
When to use: Mobile apps targeting iOS and Android, universal apps with web support, projects needing OTA updates, apps requiring native device APIs (camera, notifications, haptics), teams preferring managed infrastructure over bare React Native.
When NOT to use: Apps requiring heavy custom native code incompatible with Expo Modules API, brownfield integration into existing native apps, apps with native-only CI/CD requirements.
Expo是一个开源框架，可通过单一TypeScript代码库，基于React Native构建跨平台原生应用。它提供了基于文件的路由（Expo Router）、云构建服务（EAS Build/Submit/Update），以及一套丰富的原生模块用于设备API调用。
适用场景： 面向iOS和Android的移动应用、支持Web端的跨平台应用、需要OTA更新的项目、需要调用相机、通知、触觉反馈等原生设备API的应用、偏好托管式基础设施而非裸React Native的团队。
不适用场景： 需要大量与Expo Modules API不兼容的自定义原生代码的应用、需集成到现有原生应用的棕场项目、有原生专属CI/CD需求的应用。

Quick Reference

快速参考

PatternAPIKey Points
Stack navigation
<Stack>
from 
expo-router
File-based, 
_layout.tsx
defines navigator
Tab navigation
<Tabs>
from 
expo-router
(tabs)
directory group with 
_layout.tsx
Drawer navigation
<Drawer>
from 
expo-router/drawer
Requires 
@react-navigation/drawer
Typed routes
href
with 
/(group)/route
Enable 
typed-routes
in 
app.json
Dev build
expo-dev-client
Custom native code + dev tools
EAS Build
eas build --profile production
Cloud builds for app stores
EAS Submit
eas submit -p ios
/ 
-p android
Automated store submission
OTA Update
eas update --branch production
JS-only updates, no rebuild needed
Native moduleExpo Modules APISwift/Kotlin with 
expo-module.config.json
Platform code
Platform.select()
/ 
.ios.tsx
Per-platform logic or entire files
Styled lists
FlatList
/ 
FlashList
Virtualized, 
keyExtractor
required
Camera
expo-camera
Permissions via 
useCameraPermissions()
Notifications
expo-notifications
Push tokens via 
getExpoPushTokenAsync()
Haptics
expo-haptics
impactAsync
, 
notificationAsync
Tailwind (RN)NativeWind v4
className
prop, Tailwind CSS in RN
模式API关键点
栈导航
<Stack>
from 
expo-router
基于文件路由，
_layout.tsx
定义导航器
标签栏导航
<Tabs>
from 
expo-router
包含
_layout.tsx
的
(tabs)
目录组
抽屉导航
<Drawer>
from 
expo-router/drawer
需要
@react-navigation/drawer
依赖
类型化路由
href
with 
/(group)/route
在
app.json
中启用
typed-routes
开发构建
expo-dev-client
自定义原生代码 + 开发工具
EAS构建
eas build --profile production
用于应用商店的云构建
EAS提交
eas 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-haptics
impactAsync
、
notificationAsync
方法
RN版TailwindNativeWind v4支持
className
属性，在RN中使用Tailwind CSS

Common Mistakes

常见错误

MistakeCorrect Pattern
Using 
react-navigation
directly instead of Expo Router		Expo Router wraps React Navigation with file-based routing
Forgetting 
_layout.tsx
in route directories		Every directory with routes needs a layout file
Using 
expo start
for custom native code		Use 
expo start --dev-client
with 
expo-dev-client
Running 
eas update
after native dependency changes		Native changes require 
eas build
, OTA is JS-only
Hardcoding platform checks with 
if
Use 
Platform.select()
or platform-specific file extensions
Not requesting permissions before accessing device APIsAlways check/request permissions before camera, notifications
Using 
ScrollView
for long lists		Use 
FlatList
or 
FlashList
for virtualized rendering
Inline styles in render functionsDefine styles with 
StyleSheet.create()
outside component
Missing 
keyExtractor
on 
FlatList
Always provide 
keyExtractor
for stable list rendering
Importing from 
react-native
for Expo-provided APIs		Prefer 
expo-*
packages over 
react-native
equivalents
错误做法正确实践
直接使用
react-navigation
而非Expo Router		Expo Router基于React Navigation封装，提供基于文件的路由
路由目录中遗漏
_layout.tsx
文件		所有包含路由的目录都需要布局文件
使用
expo start
运行含自定义原生代码的应用		搭配
expo-dev-client
使用
expo start --dev-client
原生依赖变更后执行
eas update
原生变更需要执行
eas build
，OTA仅支持JS代码更新
使用
if
语句硬编码平台判断		使用
Platform.select()
或平台专属文件扩展名
访问设备API前未请求权限在调用相机、通知等API前，务必检查/请求权限
长列表使用
ScrollView
使用
FlatList
或
FlashList
进行虚拟化渲染
在渲染函数中内联样式在组件外部使用
StyleSheet.create()
定义样式
FlatList
中缺失
keyExtractor
务必提供
keyExtractor
以保证列表渲染稳定
从
react-native
导入Expo已提供的API		优先使用
expo-*
包而非
react-native
中的等效实现

Delegation

任务分工

  • Pattern discovery: Use 
    Explore
    agent
  • Build/deployment review: Use 
    Task
    agent
  • Code review: Delegate to 
    code-reviewer
    agent
If the 
react-patterns
skill is available, delegate React component patterns and hooks to it. If the 
tanstack-query
skill is available, delegate data fetching and caching to it. If the 
zustand
skill is available, delegate client-side state management to it. If the 
vitest-testing
skill is available, delegate unit and component testing patterns to it. If the 
tailwind
skill is available, delegate Tailwind CSS utility patterns to it (NativeWind uses Tailwind CSS syntax). If the 
accessibility
skill is available, delegate mobile accessibility patterns to it.
  • 模式探索：使用
    Explore
    agent
  • 构建/部署评审：使用
    Task
    agent
  • 代码评审：委托给
    code-reviewer
    agent
若
react-patterns
技能可用，将React组件模式和钩子相关任务委托给它。 若
tanstack-query
技能可用，将数据获取和缓存相关任务委托给它。 若
zustand
技能可用，将客户端状态管理相关任务委托给它。 若
vitest-testing
技能可用，将单元和组件测试模式相关任务委托给它。 若
tailwind
技能可用，将Tailwind CSS工具类模式相关任务委托给它（NativeWind使用Tailwind CSS语法）。 若
accessibility
技能可用，将移动应用无障碍模式相关任务委托给它。

References

参考资料

  • Core patterns: StyleSheet, FlatList, Platform-specific code
  • Expo Router navigation: stack, tabs, drawer, typed routes
  • EAS Build, Submit, and Update workflows
  • Dev client and native modules with Expo Modules API
  • Device APIs: camera, notifications, haptics
  • NativeWind Tailwind CSS integration
  • App configuration and environment setup
  • Performance optimization patterns
  • 核心模式：StyleSheet、FlatList、平台特定代码
  • Expo Router导航：栈、标签栏、抽屉、类型化路由
  • EAS Build、Submit和Update工作流
  • 开发客户端与基于Expo Modules API的原生模块
  • 设备API：相机、通知、触觉反馈
  • NativeWind Tailwind CSS集成
  • 应用配置与环境搭建
  • 性能优化模式