Expo 快速上手这份文档按“先跑起来再看结构再开始写功能”的顺序整理适合把 Expo 忘得差不多之后重新捡起来。1. 先理解这是什么这个项目是一个Expo React Native Expo Router项目。Expo开发工具链负责启动、调试、打包、发布。React NativeUI 框架写的是 React 组件但渲染成原生界面。Expo Router基于文件系统的路由。你创建一个页面文件就相当于创建一个路由。你现在看到的项目已经清理成最小骨架重点只剩app/_layout.tsx全局布局和导航容器。app/index.tsx首页。app.json应用配置。2. 环境准备建议本机至少具备这些基础环境Node.js建议用当前 LTS 版本。npmNode 自带即可。Expo Go装在手机上用来直接扫码运行。可选Android Studio需要本地安卓模拟器时再装。Xcode只在 macOS 上做 iOS 模拟器或打包时需要。检查版本node-vnpm-vnpx expo--version3. 安装依赖首次进入项目后执行npminstall如果依赖已经在node_modules里这一步通常很快。4. 启动项目npx expo start启动后你会看到一个终端面板常用操作是a打开 Android 模拟器i打开 iOS 模拟器w打开 Webr重新加载m打开开发菜单j打开调试器如果你没有本地模拟器最省事的方式是手机安装Expo Go电脑执行npx expo start手机扫码运行5. 现在项目的目录是什么意思app/这是 Expo Router 的核心目录。app/_layout.tsx所有页面的外层布局常用来放Stack、Tabs、主题、鉴权壳子app/index.tsx首页对应路由/assets/images/放应用图标、启动图、Web favicon。当前保留的是 Expo 配置实际会用到的图片icon.pngsplash-icon.pngfavicon.pngandroid-icon-*app.jsonExpo 项目配置中心常改的有name应用显示名slug项目唯一标识scheme深链接 schemeios/android平台配置pluginsExpo 插件配置extra.eas.projectIdEAS 项目标识ownerExpo 账号 / 组织package.json管理依赖和命令。你当前最常用的 script 是{start:expo start,android:expo start --android,ios:expo start --ios,web:expo start --web,lint:expo lint}6. 先把路由机制搞明白Expo Router 最值得先熟悉因为它决定你以后怎么组织页面。一个文件就是一个页面例如app/index.tsx-/app/profile.tsx-/profileapp/settings.tsx-/settings你只要新增文件路由就会自动生效。_layout.tsx是父布局app/_layout.tsx会包住同级和子级页面。最常见的两种写法Stack页面一层一层推进适合详情页、设置页、编辑页Tabs底部标签页适合首页、消息、我的这类一级导航你现在项目里用的是最简单的Stack。7. 先把当前两个核心文件读懂app/_layout.tsx作用初始化根导航关闭默认 header设置状态栏样式你以后通常会在这里做这些事情增加Stack.Screen配置挂全局 Provider加登录态判断接深链接或埋点app/index.tsx作用当前首页一个普通 React Native 页面组件页面里用到的是最基础的原生组件SafeAreaViewScrollViewViewText这很重要因为 Expo 开发本质上还是 React Native 页面开发。8. 你写页面时最常用的基础组件React Native 里没有 HTML 的div、span、p最常用的是View块级容器近似divText文本Image图片ScrollView可滚动容器Pressable点击交互TextInput输入框FlatList长列表样式通过StyleSheet.create()写风格类似 JS 对象const styles StyleSheet.create({ box: { padding: 16, backgroundColor: #fff, }, });9. 建议你按这个顺序练习第一步改文案直接修改app/index.tsx改标题改说明文字改卡片内容目标熟悉热更新熟悉页面入口位置第二步加一个新页面新增文件app/profile.tsximport { SafeAreaView, Text } from react-native; export default function ProfileScreen() { return ( SafeAreaView TextProfile Page/Text /SafeAreaView ); }然后在app/index.tsx里加一个链接import { Link } from expo-router;Link href/profile去 Profile/Link目标理解文件路由理解页面跳转第三步加交互练习内容一个计数器一个输入框一个按钮你会用到useStatePressableTextInput目标把 React 基础和 RN 组件重新接起来第四步请求一个接口可以先直接用fetchconst response await fetch(https://jsonplaceholder.typicode.com/todos/1); const data await response.json();目标熟悉异步请求熟悉加载态和错误态第五步做一个简单列表页练习内容列表渲染下拉滚动点击进入详情页这里建议用FlatList不要一开始就全塞进ScrollView。10. 一个最小页面长什么样import { SafeAreaView, StyleSheet, Text, View } from react-native; export default function DemoScreen() { return ( SafeAreaView style{styles.container} View style{styles.card} Text style{styles.title}Hello Expo/Text Text style{styles.desc}这是一个最小页面。/Text /View /SafeAreaView ); } const styles StyleSheet.create({ container: { flex: 1, backgroundColor: #f5f5f5, padding: 16, }, card: { backgroundColor: #fff, borderRadius: 12, padding: 16, }, title: { fontSize: 24, fontWeight: 700, }, desc: { marginTop: 8, fontSize: 16, color: #666, }, });11. 开发时最容易踩的点1. RN 不是写网页这些写法不对不能直接写 HTML 标签比如div不能用普通 CSS 文件不能随便依赖浏览器 API2. 样式单位不是px字符串应该写fontSize: 16不要写fontSize: 16px3. 布局主要靠 FlexReact Native 默认就是 Flex 布局但方向默认是column。4. 调试平台差异同一套代码会跑在iOSAndroidWeb有时候样式和行为会有差异尤其是阴影字体返回手势状态栏 / 安全区12. 什么时候用 Expo Go什么时候用原生构建Expo Go适合学习调 UI做基础功能快速预览限制只能使用 Expo Go 支持的原生能力某些自定义原生模块不能直接跑Development Build / 原生构建适合需要额外原生 SDK要接推送、地图、支付、第三方原生能力要做正式打包测试13. EAS 是做什么的你之前已经在碰eas-cli这里顺手理一下概念。EAS Build云端打包EAS Submit提交到应用市场EAS Update热更新 JS / 资源先别急着上 EAS。当前阶段建议顺序是本地把页面和路由写顺熟悉 Expo 开发流程再补eas.json最后再做构建发布14. 常用命令清单安装依赖npminstall启动开发npx expo start直接开 Androidnpmrun android直接开 iOSnpmrun ios打开 Webnpmrun web检查代码npmrun lint查看当前 Expo 登录账号npx eas-clilatestwhoami15. 故障排查expo start报ERR_SOCKET_BAD_PORT/65536如果你遇到类似下面的错误RangeError[ERR_SOCKET_BAD_PORT]: options.port should be0and65536优先检查当前 Node 版本node-v这个项目当前环境里Node.js v22.17.0触发过这个问题。更稳的做法是切到 LTS 版本比如 Node 20nvminstall20nvm use20npminstallnpx expo start如果你本机没有nvm也可以用你自己的 Node 版本管理工具切到 20 LTS。16. 你接下来最值得做的三件事把app/index.tsx改成你自己的首页。新建app/profile.tsx和app/settings.tsx把页面跳转走通。接一个真实接口把“列表页 - 详情页”做出来。这三步走完Expo 的基础开发流程基本就回来了。17. 推荐阅读顺序Expo Router 基础https://docs.expo.dev/router/introduction/React Native 基础组件https://reactnative.dev/docs/components-and-apisExpo 指南首页https://docs.expo.dev/EAS 入门https://docs.expo.dev/build/introduction/18. 判断自己算不算重新上手成功你能独立完成下面这些就基本回到状态了能启动项目能在手机或模拟器看到页面能新建一个页面并跳转过去能写一个带状态的表单能请求接口并展示列表能理解app.json和package.json的作用做到这里再继续接业务代码就比较稳。