当前的 React Native 开发生态中 Expo 已成为官方主推和社区广泛采用的开发方案。相比传统的 React Native CLI，Expo 有更简洁的项目初始化流程、更强大的工具链支持以及跨平台预览能力，适合初学者快速上手和中小型项目高效开发。

React Native CLI 依然可用，但其配置复杂、原生依赖管理繁琐，容易在不同操作系统上遇到兼容性问题。Expo 通过托管工作流（Managed Workflow）简化了原生模块的集成与构建流程，是现代 React Native 开发的首选方式。

本文将带你从零开始，完整走一遍使用 Expo 创建 React Native 项目、本地运行调试、打包 Android APK 与 iOS IPA 的全流程，涵盖环境准备、开发调试、签名配置及发布准备等关键环节。

一、环境准备

在开始之前，确保你的开发机器已安装以下工具：

  • Node.js
  • 包管理器：npm、yarn 或 pnpm 都可以，推荐优先用 npm 或 pnpm，后者在性能和依赖扁平化方面表现更好。

尽量保持所有工具为最新稳定版本。旧的 Node.js 或 npm 可能导致 node_modules 安装失败、依赖冲突或构建报错，出现莫名其妙的问题。

验证安装是否成功

打开终端（Terminal），依次执行以下命令：

node -v
npm -v

若能正常输出版本号（例如 v20.11.0 和 10.2.0），说明环境已就绪。

二、创建 React Native 项目

Expo 推荐使用 create-expo-app 快速初始化项目，无需手动配置 Webpack、Babel 原生工程。

初始化项目

在你希望存放项目的目录下执行：

npx create-expo-app myApp

创建一个标准 Expo 项目结构，里面有基础页面、配置文件和依赖项。

进入项目并启动开发服务器

cd myApp
npm start

成功启动后，终端会显示 Metro 打包服务（Metro Bundler）的运行界面，并自动打开浏览器页签（Expo DevTools）。

此时你会看到：

  • 一个 ASCII 风格的二维码
  • 一行提示文字：Scan the QR code above with Expo Go (Android) or the Camera app (iOS)
  • 多个快捷操作按钮（如运行模拟器、Web 预览等）

三、运行方式

Expo 支持多种方式运行应用。

1. 手机扫码运行

Android 设备

  1. 在 Google Play 商店下载并安装 Expo Go 应用。
  2. 打开应用 → 点击 "Scan QR Code" 。
  3. 对准电脑终端或浏览器中显示的二维码进行扫描。
  4. 应用将自动加载并运行。

iOS 设备

  1. 直接使用 系统相机 App 扫描二维码。
  2. 扫描后会弹出一个链接通知，点击选择在 Expo Go 中打开。
  3. 应用加载运行。

优势：无需数据线、无需编译，热重载（HMR）支持良好，非常适合真机调试。

2. 模拟器运行

在 Metro 终端界面中按对应键即可快速启动：

  • 按 a：启动 Android 模拟器（需已安装 Android Studio）
  • 按 i：启动 iOS 模拟器（仅限 macOS 用户）
  • 按 w：在浏览器中打开 Web 预览（基于 React Native for Web）

提示：Web 预览虽不能完全还原原生行为，但可用于快速验证 UI 布局和部分交互逻辑。

四、Android 打包

完成开发并准备发布测试包时，需要将项目构建成原生安装包（APK）。以下是基于 Expo 裸工作流（Bare Workflow）的手动打包流程。

配置 Android 构建环境

  1. 安装 Android Studio（推荐最新稳定版），安装过程中确保包含：

    • Android SDK
    • Android SDK Platform-Tools
    • Android SDK Build-Tools
    • Android Emulator（可选）

  2. 配置系统环境变量：

    • 新建系统变量 ANDROID_HOME，值为 SDK 路径（常见路径）：
C:\Users\<你的用户名>\AppData\Local\Android\Sdk
- 将以下路径添加到 `PATH`：
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator  （可选，用于命令行启动模拟器）

验证：终端执行 adb devices，若有设备列表返回则说明配置成功。

进入项目并运行原生构建命令

# 在项目根目录执行
npx expo run:android

首次运行可能出现红字警告提示未检测到设备或模拟器，可暂时忽略。此命令会尝试连接设备或启动模拟器。

随后进入原生工程目录：

cd android

创建 local.properties 文件（指定 SDK 路径）

在 android/ 目录下创建 local.properties 文件，内容如下（Windows 示例）：

sdk.dir=C:\\Users\\<你的用户名>\\AppData\\Local\\Android\\Sdk

注意：如果是 Windows，路径中的反斜杠需用双反斜杠转义，且路径必须真实存在。

生成不同类型的 APK 包

1. 生成 Debug 包（用于测试）

./gradlew assembleDebug
  • 输出路径：android/app/build/outputs/apk/debug/app-debug.apk
  • 未签名，仅用于本地测试，不可上架。

2. 生成 Release 包（用于发布）

./gradlew assembleRelease
  • 输出路径：android/app/build/outputs/apk/release/app-release.apk
  • 可发布，但必须完成签名配置，否则无法安装。

五、Release 签名配置

为了发布到应用市场，APK 必须经过数字签名。以下是完整的签名流程配置。

1. 生成 Keystore 文件

在项目合适位置（如 android/app/）生成密钥库：

keytool -genkeypair -v -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 \
-keystore keystor.jks -alias keystor

将生成的 keystor.jks 文件复制到 android/app/ 目录下。

2. 配置全局变量（android/gradle.properties）

在该文件中添加以下内容（若不存在可手动创建）：

MYAPP_UPLOAD_STORE_FILE=keystor.jks
MYAPP_UPLOAD_KEY_ALIAS=keystor
MYAPP_UPLOAD_STORE_PASSWORD=你的仓库密码
MYAPP_UPLOAD_KEY_PASSWORD=你的密钥密码

安全建议：不要将密码硬编码在代码中，可考虑使用环境变量或 CI/CD 秘钥管理。

3. 修改构建脚本（android/app/build.gradle）

找到 android {... } 块内的 signingConfigs，修改 release 配置：

signingConfigs {
    release {
        if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
            storeFile file(MYAPP_UPLOAD_STORE_FILE)
            storePassword MYAPP_UPLOAD_STORE_PASSWORD
            keyAlias MYAPP_UPLOAD_KEY_ALIAS
            keyPassword MYAPP_UPLOAD_KEY_PASSWORD
        }
    }
}

同时确保 buildTypes.release 使用了该签名配置：

buildTypes {
    release {
        signingConfig signingConfigs.release
        minifyEnabled false
        shrinkResources false
    }
}

完成签名后重新打包

./gradlew clean
./gradlew assembleRelease

此时生成的 app-release.apk 即为已签名的正式发布包，可用于内测或上传应用商店。

六、iOS 打包

重要提醒：在 Windows 系统上无法编译 iOS 安装包。iOS 构建必须在 macOS 系统 上完成，并需配备 Xcode 和真实设备测试。

打包前提条件

  1. 一台运行较新 macOS 的 Mac 电脑
  2. 已安装 Xcode（App Store 下载）
  3. 已安装 Command Line Tools
  4. 网络通畅（建议开启代理以加速依赖下载）
  5. 已有可运行的 Expo 项目

1. 验证 Xcode 命令行工具

终端执行：

xcode-select -p

预期输出：

/Applications/Xcode.app/Contents/Developer

若无输出，请运行：

sudo xcode-select --install

2. 安装依赖并预构建项目

npm install
npx expo prebuild -p ios

prebuild 命令会根据 app.json 配置生成原生工程目录（ios/ 和 android/）。若已有原生目录，可加 --clean 强制重建。

若提示 CocoaPods 错误

请先安装 Homebrew（若未安装）：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

再安装 CocoaPods：

brew install cocoapods

然后进入 ios/ 目录执行：

cd ios
pod install --repo-update

3. 使用 Xcode 打开项目

打开生成的 Workspace 文件：

open MyApp.xcworkspace

务必打开 **.xcworkspace**，而非 .xcodeproj，否则可能导致依赖加载失败。

4. 登录 Apple ID 并配置签名

个人开发者账号（未支付 $99/年）

  1. 在 Xcode 中进入 Preferences > Accounts，点击 “+” 添加 Apple ID。
  2. 登录后选中该账号，在项目 General 设置中选择对应的 Team。
  3. 同意最新的开发者协议（可能需访问 Apple Developer 网站确认）。

5. 添加设备 UDID

image

image

完成后重启 Xcode，确保签名状态变为 “Ready to Run”。

image

6. 手动生成 IPA

确保无误之后编译 Archive。

image

编译无误完成后会弹出如下界面：

image

image

image

image

  1. 在 Xcode 的 Products 目录下找到 .app 文件。
  2. 新建一个文件夹命名为 Payload。
  3. 将 .app 文件复制进去。
  4. 右键压缩 Payload 文件夹 → 得到 Payload.zip。
  5. 将 .zip 改名为 .ipa，即得到可安装的 IPA 包。

可通过邮件、企业分发平台等方式发送给测试人员安装。

七、结语

通过 Expo 构建 React Native 项目，不仅能享受“开箱即用”的开发体验，还能灵活切换托管与裸工作流，在需要时深入原生配置进行定制化打包。

场景推荐方式
快速原型开发Expo 托管工作流 + Expo Go 扫码
内测发布配置签名后构建 Release APK/IPA
上架应用市场使用 Expo Application Services (EAS) 或 Xcode 归档上传
持续集成推荐使用 EAS Build + CI/CD 工具链

随着 Expo 对 EAS（Expo Application Services）的持续优化，未来开发者甚至可以完全脱离本地原生环境，通过云端构建一键生成 Android 和 iOS 安装包，进一步降低入门门槛。

标签: iOS 开发, 开发, RN, 安卓开发

评论已关闭