从零开始：使用 Expo 构建你的第一个 React Native 应用

前言

React Native 是一个强大的框架，允许您使用 JavaScript 和 React 构建跨平台的移动应用。而 Expo 是一个基于 React Native 的开发平台，它极大地简化了开发、构建和部署流程。本教程将带您从零开始，创建一个 "Hello World" 应用，并深入探讨在实际项目中如何配置和使用开发版本（Development Build）。

官方文档：docs.expo.dev/

步骤

第一步：准备工作

在开始之前，请确保您的开发环境已准备好。

1.1 安装必要工具

• Node.js : 访问 Node.js 官网 下载并安装 LTS (长期支持) 版本。安装完成后，打开终端，输入 node --version 和 npm --version 来验证是否安装成功。
• 代码编辑器 : 推荐使用 Visual Studio Code (VS Code) 。安装完成后，可以安装 "ESLint" 和 "Prettier" 等扩展以提升开发体验。
• Expo Go 应用 : 在 Android 或 iOS 手机上，从应用商店安装 Expo Go 应用。这将用于在真实设备上预览应用。

1.2 检查网络

确保您的开发电脑和手机连接在同一个 Wi-Fi 网络下，这是通过二维码连接的关键。

第二步：创建第一个 Expo 项目

我们将使用 create-expo-app 命令行工具来快速初始化项目。

2.1 创建项目

打开终端，运行以下命令：

npx create-expo-app@latest HelloWorldApp

这将创建一个名为 HelloWorldApp 的新文件夹，并使用默认模板初始化项目。

2.2 进入项目目录

cd HelloWorldApp

---

第三步：运行开发服务器

启动 Expo 的开发服务器，它会为我们处理热重载和实时更新。

npx expo start

服务器启动后，您会看到一个包含二维码的终端界面，同时浏览器也会自动打开一个管理页面。

---

第四步：在设备上预览 "Hello World"

4.1 使用 Expo Go 扫描二维码

1. 在您的手机上打开 Expo Go 应用。
2. Android: 点击右上角的 "SCAN QR CODE" 按钮。
3. iOS: 使用手机自带的相机应用直接扫描终端或浏览器中显示的二维码。
4. 扫描成功后，Expo Go 会开始下载并加载您的应用。

4.2 查看结果

加载完成后，应该能在手机屏幕上看到 "Welcome to Expo!" 的默认欢迎信息。这证明应用已经成功运行！

4.3 实时修改代码

打开 app/index.tsx 文件，将 <Text>Welcome to Expo!</Text> 修改为 <Text>Hello World!</Text> 并保存。您会发现手机上的应用自动刷新 ，显示了新的文本！这就是 React Native 的热重载（Hot Reloading）功能。

第五步：进阶 - 配置开发版本 (Development Build)

在实际项目中，您可能会添加自定义原生代码或特定配置（如启动画面、图标），这些功能无法在标准的 Expo Go 应用中测试。这时就需要创建一个开发版本 (Development Build) 。

5.1 安装 expo-dev-client

npx expo install expo-dev-client

5.2 配置 eas.json

首先，安装 EAS CLI 并登录您的 Expo 账户：

npm install -g eas-cli
eas login

然后，初始化 EAS 项目并配置 eas.json：

eas init

编辑 eas.json 文件，添加开发构建配置：

// eas.json
{
  "cli": {
    "version": ">= 3.0.0",
    "appVersionSource": "remote" // 推荐设置，避免未来构建失败
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "android": {
        "gradleCommand": ":app:assembleDebug"
      },
      "ios": {
        "scheme": "dev"
      }
    }
  }
}

关键点 ："developmentClient": true 告诉 EAS 我们要构建一个包含自定义原生代码的开发客户端。

5.3 构建开发版本

运行以下命令提交构建任务：

eas build --profile development --platform android

注意 ：首次运行可能会看到关于 cli.appVersionSource 的警告，按照提示在 eas.json 中添加 "appVersionSource": "remote" 即可解决。

5.4 监控构建进度

构建过程可能需要 10-30 分钟。可以使用以下命令查看状态：

eas build:list

当状态变为 finished 时，表示构建成功。

5.5 下载并安装 APK

从 eas build:list 的输出中找到 Artifact 链接，下载 .apk 文件。

在 Android 设备上安装：

1. 将 .apk 文件传输到手机。
2. 在手机设置中，为您文件管理器开启"安装未知应用"的权限。
3. 点击 .apk 文件进行安装。

第六步：连接开发版本 App

1. 启动开发服务器 ：确保 npx expo start 仍在运行。
2. 打开开发版本 App：在手机上找到并打开安装的自定义 App。
3. 连接：App 会提示扫描二维码或输入 URL。扫描终端中的二维码即可连接。

现在，对 app/index.tsx 的任何修改都会实时反映在这个自定义的开发版本 App 中！

常见问题与解决方案

• 问题 ：构建时出现 cli.appVersionSource 警告。

  • 解决方案 ：在 eas.json 的 cli 对象中添加 "appVersionSource": "remote"。这是 Expo 的推荐做法，可以自动管理版本号，避免应用商店因重复版本号而被拒。

• 问题：手机无法连接到开发服务器。

  • 解决方案：

    1. 确保手机和电脑在同一 Wi-Fi 网络。
    2. 检查电脑的防火墙设置，确保端口 8081 未被阻止。
    3. 尝试在 Expo Go App 内手动输入电脑的 IP 地址和端口（如 http://192.168.1.100:8081）。

• 问题 ：安装 .apk 时提示"禁止安装"。

  • 解决方案：进入手机设置 -> 安全 -> 安装未知应用，为文件管理器或浏览器开启权限。

总结

这个自定义的开发版本 App 将成为你未来开发的强大工具。接下来，你可以探索 Expo Router 来构建多页面应用，或者学习更多 React Native 的高级特性。