Expo 快速创建 Android/iOS 应用开发指南

概述

本指南基于 Expo 官方文档，提供使用 Expo 快速创建 Android 和 iOS 应用的完整流程。Expo 是一个基于 React Native 的框架，它简化了移动应用开发流程，支持一键部署到 Android 和 iOS 平台。

环境准备与工具安装

1. Node.js 环境

作用：Node.js 是 Expo 运行环境的基础，提供 JavaScript 运行时和包管理工具。

安装要求：

需要安装 Node.js 16.x 或更高版本
推荐使用 Node.js 18.x 或 20.x LTS 版本

安装验证：

bash 复制代码

node --version
npm --version

2. Expo CLI

作用：Expo CLI 是核心开发工具，用于初始化项目、运行开发服务器、构建和部署应用。

安装命令：

bash 复制代码

npm install -g expo-cli

安装验证：

bash 复制代码

expo --version

3. Watchman 安装（重要补充）

作用：Watchman 是由 Meta（前 Facebook）开发的文件监控服务，用于监控文件系统变化，提高开发服务器热重载性能。

安装要求：

macOS：推荐安装 Watchman
Linux：推荐安装 Watchman
Windows：不需要安装 Watchman

安装命令：

bash 复制代码

# macOS (使用 Homebrew)
brew install watchman

# Linux (Ubuntu/Debian)
sudo apt-get install watchman

# 验证安装
watchman --version

4. JDK 安装（重要补充）

作用：JDK（Java Development Kit）是 Android 应用构建和运行所必需的开发工具包。

安装要求：

需要 JDK 11 或更高版本
推荐使用 JDK 17 或 JDK 21

安装验证：

bash 复制代码

java -version
javac -version

环境变量配置：

bash 复制代码

# 设置 JAVA_HOME 环境变量（示例）
export JAVA_HOME=/path/to/jdk
export PATH=$JAVA_HOME/bin:$PATH

5. Android Studio（Android 开发必需）

作用：Android Studio 是官方的 Android 集成开发环境，提供 SDK、模拟器和构建工具。

安装步骤：

下载并安装 Android Studio
安装 Android SDK
配置环境变量：
- ANDROID_HOME 或 ANDROID_SDK_ROOT
- 将 platform-tools 添加到 PATH

验证安装：

bash 复制代码

# 检查 Android SDK 路径
echo $ANDROID_HOME

# 检查可用设备
adb devices

6. Xcode（iOS 开发必需）

作用：Xcode 是苹果官方的 iOS 集成开发环境，仅限 macOS 系统。

安装要求：

仅限 macOS 系统
需要 macOS 12.3 或更高版本
需要 Apple Developer 账户（用于真机调试和发布）

安装步骤：

从 Mac App Store 下载 Xcode
安装 Xcode Command Line Tools
配置 Apple Developer 账户

验证安装：

bash 复制代码

xcode-select --install

项目创建与开发流程

1. 初始化项目

命令：

bash 复制代码

expo init MyExpoApp

项目类型选择：

blank：空白模板，适合初学者
blank-typescript：TypeScript 空白模板
app：带有导航的模板
tab：标签页模板
custom：自定义模板

2. 项目结构说明

复制代码

MyExpoApp/
├── app.json          # 应用配置
├── package.json      # 项目依赖
├── node_modules/     # 依赖包
├── assets/           # 静态资源
├── src/              # 源代码目录
└── .expo/            # Expo 构建缓存

3. 启动开发服务器

命令：

bash 复制代码

cd MyExpoApp
npm start
# 或
yarn start

开发服务器功能：

提供本地开发环境
支持热重载（Hot Reloading）
提供开发菜单（摇一摇设备或按 Ctrl+M）

4. 运行应用

方式一：Expo Go 应用（推荐）

在手机上下载 Expo Go 应用
扫描开发服务器显示的二维码
实时预览和调试应用

方式二：Android 模拟器

bash 复制代码

# 启动 Android 模拟器
expo start --android

方式三：iOS 模拟器

bash 复制代码

# 启动 iOS 模拟器
expo start --ios

5. 真机调试

Android 真机调试：

开启 USB 调试模式
连接手机到电脑
运行 expo start --android

iOS 真机调试：

需要 Apple Developer 账户
在 Xcode 中配置证书和描述文件
运行 expo start --ios

构建与发布

1. 开发构建

Android 开发构建：

bash 复制代码

expo build:android

iOS 开发构建：

bash 复制代码

expo build:ios

2. 生产构建

Android 生产构建：

bash 复制代码

expo build:android --release

iOS 生产构建：

bash 复制代码

expo build:ios --release

3. 发布到应用商店

Expo Application Services (EAS)：

bash 复制代码

# 安装 EAS CLI
npm install -g eas-cli

# 登录 Expo 账户
eas login

# 配置构建配置文件
eas build:configure

# 提交构建
eas build

常见问题与解决方案

1. 环境检查

命令：

bash 复制代码

expo doctor

检查内容：

Node.js 版本
Expo CLI 版本
Watchman 状态
Java 版本
Android SDK 路径
Xcode 状态（macOS）

2. 常见错误处理

Android 构建失败：

检查 JDK 版本和路径
验证 Android SDK 安装
清理构建缓存：expo prebuild --clean

iOS 构建失败：

检查 Xcode 版本
验证 Apple Developer 账户
更新 CocoaPods：sudo gem install cocoapods

3. 性能优化

开发优化：

使用 expo start --clear 清理缓存
禁用调试日志：expo start --no-devtools
使用开发构建替代模拟器

最佳实践

1. 项目组织

使用 TypeScript 提高代码质量
分离业务逻辑和 UI 组件
合理组织目录结构

2. 状态管理

简单应用使用 React Context
复杂应用使用 Redux 或 MobX
考虑使用 Zustand 或 Recoil

3. 测试策略

使用 Jest 进行单元测试
使用 React Native Testing Library
真机测试覆盖主要场景

4. 安全考虑

敏感信息使用环境变量
API 请求使用 HTTPS
本地数据加密存储

总结

使用 Expo 创建 Android/iOS 应用的主要优势：

快速启动：几分钟内即可创建可运行的应用
跨平台：一套代码同时支持 Android 和 iOS
热重载：实时预览代码更改
简化构建：无需配置复杂的原生构建环境
丰富生态：大量预制组件和插件

下一步行动：

按照上述步骤完成环境配置
创建第一个 Expo 项目
尝试修改示例代码并观察效果
逐步添加功能模块
进行真机测试和性能优化

注意事项：

生产环境构建需要 Apple Developer 账户（iOS）
大型应用可能需要优化构建时间
定期更新 Expo 和依赖包版本

如有具体问题或需要进一步帮助，请随时提问。