如何用 3 条命令跑通 Expo：React Native 跨端开发的快速上手指南

如何用 3 条命令跑通 Expo：React Native 跨端开发的快速上手指南

【免费下载链接】expoAn open-source framework for making universal native apps with React. Expo runs on Android, iOS, and the web.项目地址: https://gitcode.com/GitHub_Trending/ex/expo

做跨端 App 最劝退你的往往不是写业务，而是环境：iOS 要 Xcode，Android 要 Gradle，相机、定位、权限这些原生能力还得逐个封装。Expo 把这些问题打包进一个开源框架里：你写 React 和 JavaScript，它替你生成 Android、iOS 和 Web 三端可用的应用，SDK、CLI、路由和原生模块 API 都在同一个仓库里维护，版本天然对齐。

一、为什么选 Expo 做跨端，先看这 3 个问题

先给结论：团队里没有专职原生工程师时，Expo 是性价比最高的跨端方案。

1. 三端一套代码，而不是三套维护

同一份 JSX 直接产出 Android、iOS 和 Web 应用，仓库里的模板默认就带了react-native-web，Web 端不用单独折腾。

2. 原生能力开箱即用

相机、音频、SQLite、推送、本地认证……仓库packages/下每个expo-*目录就是一个功能模块。要加地图？装个依赖的事，不用写 Kotlin 和 Swift。

3. 版本地狱被管住了

Expo SDK 里的模块版本互相匹配，CLI 和 Expo Go 应用按同一个 SDK 节奏升级，新手最常见的"依赖对不上"在这里被提前消掉了。

二、3 分钟从零到真机：零配置启动步骤

本节你能拿到一套 3 条命令的上手流程，跑完就能看到 App。

git clone https://gitcode.com/GitHub_Trending/ex/expo npx create-expo-app my-app cd my-app && npm install && npx expo start

启动后终端给出预览地址：手机连上同一 Wi-Fi，用 Expo Go 扫码即跑；没有设备就按i或a起模拟器。默认模板内置 TypeScript、文件式路由 expo-router、动画库和启动屏，clone 下来翻一眼 默认模板 就知道拿到的是什么。

三、真实场景怎么用：从相机到上线的完整路径

本节按你实际会遇到的三个场景走一遍。

场景 1：给 App 加一个相机

装expo-camera，在组件里调用requestCameraPermissionsAsync()，系统弹权限框，用户点允许后开始预览。全程没碰一行原生代码，Expo Go 里扫码立刻能看到效果——改 JS、热重载、秒级验证。

场景 2：验证一个比较完整的功能

别只读文档，仓库自带一堆"功能样板间"：apps/native-component-list/把几十种组件做成了可点的列表，apps/notification-tester/、apps/test-suite/则专门用来压测推送和系统 API。拿不准某个 API 在真机上的表现，直接对照着跑。

场景 3：给团队和老板演示

npx expo start会生成局域网可访问的链接，同事手机扫码就能装你的开发版，不用走应用商店，也不用发安装包。

四、周边工具怎么选：Expo Go、独立客户端与 config plugins

Expo Go 够用就别自己打包

开发期一律用 Expo Go：免打包、免签名、秒装。它是官方维护的"万能容器"，缺点也明确——不支持你自写的原生模块。

什么时候必须打独立客户端

一旦要用自定义原生模块，或者做性能极限优化，就用 EAS 构建出独立客户端。此时 App 里的android/、ios/目录是生成物，别手改——改配置请走 config plugins：几行 TS 代码就能自动改AndroidManifest.xml、Info.plist这类文件，升级 SDK 也不会丢配置。

OTA 更新：只更 JS，别神话它

配合expo-updates，纯 JavaScript 改动可以绕过应用商店审核推到用户手机，expo-updates 的说明 里有完整的更新机制文档。

五、常见坑与避坑清单：4 个新手最容易踩的点

本节是本文信息密度最高的部分，建议截图收藏。

1. 别再用expo-cli

网上老教程让你npm install -g expo-cli，那是已经弃用的工具。现在所有操作都走npx expo命令，项目初始化用npx create-expo-app。

2. 扫码报"版本不匹配"

项目 SDK 是 57，手机里的 Expo Go 还是 54，就会弹不兼容提示。解法二选一：去应用商店更新 Expo Go，或把项目降到手机支持的 SDK。版本对照查 docs/ 目录下的版本文档。

3. 以为 OTA 能救原生代码

expo-updates只分发 JS 层。团队加了新原生模块，用户必须装新版本——排期时就把这一点算进去。

4. 手改android/和ios/目录

标准项目里这两个目录是构建产物，下次构建直接覆盖。所有定制需求都收敛到 config plugins，这是官方设计的逃生通道，也是长期维护的地基。

5. 导航别自己拼

路由直接用 expo-router，按文件组织页面，和 Web 圈的路由习惯一致，文档在 docs/pages/router/。

六、下一步该读什么

跑通第一个页面后，按顺序看三样东西：docs/下的入门与版本文档建立全局认知；packages/expo-router/看路由实现；apps/bare-expo/看脱离 Expo Go 的"裸跑"形态长什么样。把这三处看完，Expo 从入门到进阶的路线就完整了，剩下的交给业务需求。

【免费下载链接】expoAn open-source framework for making universal native apps with React. Expo runs on Android, iOS, and the web.项目地址: https://gitcode.com/GitHub_Trending/ex/expo