[!info] related notes

• 所属配置: android-development-environment-setup
• 底层框架: react-native
• 相关概念: ecmascript-moc

Expo

一句话定义

Expo 是 React Native 的开发平台，提供两种工作流：Expo Go（托管）和 Development Build（自定义原生），大幅降低移动端开发门槛。

两种工作流

工作流	原生代码	适合
Expo Go（Managed）	不接触	快速原型、学习、轻量项目
Development Build	可自定义	需要自定义原生模块的正式项目

环境要求

• Node.js 18+
• 如果只用 Expo Go：不需要 Android SDK（用手机装 Expo Go App 即可预览）
• 如果需要模拟器或 Development Build：需要完整 Android 环境 → android-development-environment-setup

快速起步

# 创建项目
npx create-expo-app my-app
cd my-app

# 启动开发服务器
npx expo start

启动后会显示 QR 码：

• 手机装 Expo Go App → 扫码预览
• 按 a 打开 Android 模拟器
• 按 w 在浏览器中预览（Web 支持）

项目结构

my-app/
├── app/               # 路由页面（Expo Router）
│   ├── index.tsx      # 首页
│   └── _layout.tsx    # 布局组件
├── assets/            # 图片、字体等静态资源
├── app.json           # Expo 配置
├── package.json
└── tsconfig.json

Expo Router（文件路由）

Expo 使用基于文件系统的路由（类似 Next.js）：

app/
├── index.tsx          → /
├── about.tsx          → /about
├── [id].tsx           → /:id（动态路由）
└── (tabs)/
    ├── index.tsx      → /（Tab 首页）
    └── settings.tsx   → /settings

常用 Expo API

Expo 内置了大量原生 API，无需额外配置：

模块	用途
expo-camera	相机
expo-location	GPS 定位
expo-file-system	文件读写
expo-secure-store	安全存储
expo-notifications	推送通知
expo-haptics	触觉反馈
expo-image-picker	图片选择器

npx expo install expo-camera expo-location

从 Managed 迁移到 Development Build

当 Expo Go 的能力不够时（需要自定义原生模块）：

# 安装 EAS CLI
npm install -g eas-cli

# 配置项目
eas build:configure

# 构建 Development Build
eas build --platform android --profile development

EAS（Expo Application Services）

详见 eas。

• EAS Build：云端打包编译，生成独立 .apk / .ipa
• EAS Submit：自动上架到应用商店
• EAS Update：OTA 热更新，JS 层无感修复

常见问题

问题	解决
Expo Go 版本不匹配	更新 Expo Go App 或 SDK 版本
模块在 Expo Go 中不可用	需要 Development Build，如 expo-notifications
npx expo start 很慢	用 --clear 清缓存
真机连不上	确保手机和电脑在同一 Wi-Fi