expo学习路线一、先搞清楚 Expo 是什么（5 分钟）一句话理解不写原生代码也能用摄像头 / 定位 / 推送开

一、先搞清楚 Expo 是什么（5 分钟）

一句话理解

Expo = React Native 的“工程化外壳 + 原生能力工具箱”

不写原生代码也能用摄像头 / 定位 / 推送
开箱即用：构建、调试、发布
比裸 RN 少 60% 配置

二、阶段 1：能跑、能调、能发布（必走）

1️⃣ 环境 & 基础

目标：5 分钟跑起来

npm i -g expo-cli
npx create-expo-app myApp
cd myApp
npm start

核心文件：

app.json / app.config.ts
App.tsx

2️⃣ Expo Go & 真机调试（重点）

扫码即可运行
不用装 Xcode / Android Studio

⚠️ 真坑：

有些 API 在 Expo Go 不支持（后面说）

3️⃣ Expo Router（强烈建议）

Expo 官方路由方案（比 React Navigation 省心）

app/
 ├─ index.tsx
 ├─ login.tsx
 ├─ (tabs)/
 │   ├─ home.tsx
 │   └─ profile.tsx

import { router } from 'expo-router'
router.push('/login')

三、阶段 2：真正做 App（你会开始踩坑）

4️⃣ 常用 Expo API（必须掌握）

优先级顺序 👇

⭐ 一定要会

expo-file-system
expo-image-picker
expo-camera
expo-haptics
expo-notifications

import * as ImagePicker from 'expo-image-picker'

5️⃣ 权限管理（新手必踩）

await ImagePicker.requestMediaLibraryPermissionsAsync()

⚠️ 坑点：

iOS 权限必须写 app.json
Android 权限不全直接 crash

6️⃣ 样式体系（和 Web 完全不同）

没有 CSS
用 StyleSheet
flex 默认 column

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
})

四、阶段 3：工程化 & 性能（拉开差距）

7️⃣ 状态管理（和 Web 类似）

8️⃣ 列表性能（App 生死线）

❌

ScrollView + map

✅

FlatList

<FlatList
  data={list}
  keyExtractor={item => item.id}
/>

9️⃣ 图片 & 资源（必踩）

用 expo-image（比 Image 强）
本地图片必须 require

五、阶段 4：离开 Expo Go（进阶）

🔟 EAS（Expo 真正的灵魂）

你迟早要学的

npx expo prebuild
npx expo run:ios
npx expo run:android

EAS Build / Submit

npx expo install expo-dev-client
npx expo run:ios

👉 这一步之后：

能写原生代码
能装自定义 SDK
不再受 Expo Go 限制

六、阶段 5：发布 & 上线

1️⃣1️⃣ 打包发布

npx expo build

或（推荐）：

npx expo prebuild

1️⃣2️⃣ 上架注意点

iOS

权限描述必填
图标 / 启动图尺寸严格

Android

签名证书
targetSdkVersion

七、Expo 常见大坑（提前避）

❌ Expo ≠ Web

没有 DOM
没有 window
没有 localStorage（用 AsyncStorage）

❌ Expo Go 万能错觉

能跑 ≠ 能上线
推送、支付、SDK 常出问题

❌ 滥用第三方 RN 库

不一定支持 Expo
要看是否支持 Expo Dev Client

八、给你的「现实建议」

你有：

React 深度经验
工程思维
后台系统经验

👉 学习重点顺序应该是：

1️⃣ Expo Router
2️⃣ 常用原生 API
3️⃣ EAS / Dev Client
4️⃣ 性能 & 列表
5️⃣ 发布流程

不要在 UI / 动画上浪费时间