Expo 快速上手

Expo 快速上手

这份文档按“先跑起来，再看结构，再开始写功能”的顺序整理，适合把 Expo 忘得差不多之后重新捡起来。

1. 先理解这是什么

这个项目是一个Expo + React Native + Expo Router项目。

• Expo：开发工具链，负责启动、调试、打包、发布。
• React Native：UI 框架，写的是 React 组件，但渲染成原生界面。
• Expo Router：基于文件系统的路由。你创建一个页面文件，就相当于创建一个路由。

你现在看到的项目已经清理成最小骨架，重点只剩：

• app/_layout.tsx：全局布局和导航容器。
• app/index.tsx：首页。
• app.json：应用配置。

2. 环境准备

建议本机至少具备这些基础环境：

1. Node.js：建议用当前 LTS 版本。
2. npm：Node 自带即可。
3. Expo Go：装在手机上，用来直接扫码运行。
4. 可选：
   • Android Studio：需要本地安卓模拟器时再装。
   • Xcode：只在 macOS 上做 iOS 模拟器或打包时需要。

检查版本：

node-vnpm-vnpx expo--version

3. 安装依赖

首次进入项目后执行：

npminstall

如果依赖已经在node_modules里，这一步通常很快。

4. 启动项目

npx expo start

启动后你会看到一个终端面板，常用操作是：

• a：打开 Android 模拟器
• i：打开 iOS 模拟器
• w：打开 Web
• r：重新加载
• m：打开开发菜单
• j：打开调试器

如果你没有本地模拟器，最省事的方式是：

1. 手机安装Expo Go
2. 电脑执行npx expo start
3. 手机扫码运行

5. 现在项目的目录是什么意思

app/

这是 Expo Router 的核心目录。

• app/_layout.tsx
  • 所有页面的外层布局
  • 常用来放Stack、Tabs、主题、鉴权壳子
• app/index.tsx
  • 首页
  • 对应路由/

assets/images/

放应用图标、启动图、Web favicon。

当前保留的是 Expo 配置实际会用到的图片：

• icon.png
• splash-icon.png
• favicon.png
• android-icon-*

app.json

Expo 项目配置中心，常改的有：

• name：应用显示名
• slug：项目唯一标识
• scheme：深链接 scheme
• ios/android：平台配置
• plugins：Expo 插件配置
• extra.eas.projectId：EAS 项目标识
• owner：Expo 账号 / 组织

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->/profile
• app/settings.tsx->/settings

你只要新增文件，路由就会自动生效。

_layout.tsx是父布局

app/_layout.tsx会包住同级和子级页面。

最常见的两种写法：

1. Stack
   • 页面一层一层推进
   • 适合详情页、设置页、编辑页
2. Tabs
   • 底部标签页
   • 适合首页、消息、我的这类一级导航

你现在项目里用的是最简单的Stack。

7. 先把当前两个核心文件读懂

app/_layout.tsx

作用：

• 初始化根导航
• 关闭默认 header
• 设置状态栏样式

你以后通常会在这里做这些事情：

• 增加Stack.Screen配置
• 挂全局 Provider
• 加登录态判断
• 接深链接或埋点

app/index.tsx

作用：

• 当前首页
• 一个普通 React Native 页面组件

页面里用到的是最基础的原生组件：

• SafeAreaView
• ScrollView
• View
• Text

这很重要，因为 Expo 开发本质上还是 React Native 页面开发。

8. 你写页面时最常用的基础组件

React Native 里没有 HTML 的div、span、p，最常用的是：

• View：块级容器，近似div
• Text：文本
• Image：图片
• ScrollView：可滚动容器
• Pressable：点击交互
• TextInput：输入框
• FlatList：长列表

样式通过StyleSheet.create()写，风格类似 JS 对象：

const styles = StyleSheet.create({ box: { padding: 16, backgroundColor: '#fff', }, });

9. 建议你按这个顺序练习

第一步：改文案

直接修改app/index.tsx：

• 改标题
• 改说明文字
• 改卡片内容

目标：

• 熟悉热更新
• 熟悉页面入口位置

第二步：加一个新页面

新增文件app/profile.tsx：

import { SafeAreaView, Text } from 'react-native'; export default function ProfileScreen() { return ( <SafeAreaView> <Text>Profile Page</Text> </SafeAreaView> ); }

然后在app/index.tsx里加一个链接：

import { Link } from 'expo-router';

<Link href="/profile">去 Profile</Link>

目标：

• 理解文件路由
• 理解页面跳转

第三步：加交互

练习内容：

• 一个计数器
• 一个输入框
• 一个按钮

你会用到：

• useState
• Pressable
• TextInput

目标：

• 把 React 基础和 RN 组件重新接起来

第四步：请求一个接口

可以先直接用fetch：

const 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 文件
• 不能随便依赖浏览器 API

2. 样式单位不是px字符串

应该写：

fontSize: 16

不要写：

fontSize: '16px'

3. 布局主要靠 Flex

React Native 默认就是 Flex 布局，但方向默认是column。

4. 调试平台差异

同一套代码会跑在：

• iOS
• Android
• Web

有时候样式和行为会有差异，尤其是：

• 阴影
• 字体
• 返回手势
• 状态栏 / 安全区

12. 什么时候用 Expo Go，什么时候用原生构建

Expo Go

适合：

• 学习
• 调 UI
• 做基础功能
• 快速预览

限制：

• 只能使用 Expo Go 支持的原生能力
• 某些自定义原生模块不能直接跑

Development Build / 原生构建

适合：

• 需要额外原生 SDK
• 要接推送、地图、支付、第三方原生能力
• 要做正式打包测试

13. EAS 是做什么的

你之前已经在碰eas-cli，这里顺手理一下概念。

• EAS Build：云端打包
• EAS Submit：提交到应用市场
• EAS Update：热更新 JS / 资源

先别急着上 EAS。当前阶段建议顺序是：

1. 本地把页面和路由写顺
2. 熟悉 Expo 开发流程
3. 再补eas.json
4. 最后再做构建发布

14. 常用命令清单

安装依赖：

npminstall

启动开发：

npx expo start

直接开 Android：

npmrun android

直接开 iOS：

npmrun ios

打开 Web：

npmrun web

检查代码：

npmrun lint

查看当前 Expo 登录账号：

npx eas-cli@latestwhoami

15. 故障排查

expo start报ERR_SOCKET_BAD_PORT/65536

如果你遇到类似下面的错误：

RangeError[ERR_SOCKET_BAD_PORT]: options.port should be>=0and<65536

优先检查当前 Node 版本：

node-v

这个项目当前环境里，Node.js v22.17.0触发过这个问题。更稳的做法是切到 LTS 版本，比如 Node 20：

nvminstall20nvm use20npminstallnpx expo start

如果你本机没有nvm，也可以用你自己的 Node 版本管理工具切到 20 LTS。

16. 你接下来最值得做的三件事

1. 把app/index.tsx改成你自己的首页。
2. 新建app/profile.tsx和app/settings.tsx，把页面跳转走通。
3. 接一个真实接口，把“列表页 -> 详情页”做出来。

这三步走完，Expo 的基础开发流程基本就回来了。

17. 推荐阅读顺序

1. Expo Router 基础：https://docs.expo.dev/router/introduction/
2. React Native 基础组件：https://reactnative.dev/docs/components-and-apis
3. Expo 指南首页：https://docs.expo.dev/
4. EAS 入门：https://docs.expo.dev/build/introduction/

18. 判断自己算不算重新上手成功

你能独立完成下面这些，就基本回到状态了：

• 能启动项目
• 能在手机或模拟器看到页面
• 能新建一个页面并跳转过去
• 能写一个带状态的表单
• 能请求接口并展示列表
• 能理解app.json和package.json的作用

做到这里，再继续接业务代码就比较稳。