React Native开发Android&IOS流程完整指南

文章目录

- - 一、环境搭建
  - - [1. 基础依赖安装](#1. 基础依赖安装)
    - [2. 初始化 React Native 项目](#2. 初始化 React Native 项目)
  - 二、开发流程
  - - [1. 目录结构说明](#1. 目录结构说明)
    - [2. 运行项目](#2. 运行项目)
    - [3. 核心开发技巧](#3. 核心开发技巧)
  - 三、调试
  - - [1. 基础调试工具](#1. 基础调试工具)
    - [2. 高级调试工具](#2. 高级调试工具)
  - 四、打包发布
  - - [1. Android 打包（APK/AAB）](#1. Android 打包（APK/AAB）)
    - [2. iOS 打包（IPA）](#2. iOS 打包（IPA）)
  - 五、上架应用商店
  - 六、常见问题

以下是使用 React Native 开发 Android 和 iOS 应用的完整流程指南，涵盖环境搭建、开发、调试、打包发布等核心环节：

一、环境搭建

1. 基础依赖安装

Node.js ：推荐 v18+（需包含 npm 或 yarn），用于包管理和运行 JavaScript 环境。
下载地址：Node.js 官网
Java Development Kit (JDK) ：Android 开发需 JDK 17（React Native 0.73+ 要求）。
推荐使用 Amazon Corretto 17 或 Oracle JDK。
Android 开发工具 ：
- 安装 Android Studio，并在安装时勾选 Android SDK 、Android SDK Platform 、Android Virtual Device。
- 配置 Android SDK 环境变量：
  - 新增 ANDROID_HOME 变量，指向 SDK 路径（如 C:\Users\<用户名>\AppData\Local\Android\Sdk）。
  - 将 %ANDROID_HOME%\platform-tools、%ANDROID_HOME%\emulator、%ANDROID_HOME%\tools、%ANDROID_HOME%\tools\bin 添加到系统 PATH。
iOS 开发工具（仅 macOS） ：
- 安装 Xcode（需 macOS 系统），用于编译 iOS 代码和运行模拟器。
- 安装 Xcode Command Line Tools：xcode-select --install。

2. 初始化 React Native 项目

使用官方脚手架 npx react-native init 创建项目：

bash 复制代码

npx react-native@latest init MyApp  # latest 表示最新稳定版
cd MyApp

二、开发流程

1. 目录结构说明

核心文件/目录：

App.js：入口组件，应用的根视图。
android/：Android 原生代码目录（可通过 Android Studio 打开）。
ios/：iOS 原生代码目录（可通过 Xcode 打开）。
package.json：项目依赖和脚本配置。

2. 运行项目

Android：

bash 复制代码

# 启动 Metro  bundler（JS 打包服务器）
npx react-native start

# 新终端运行 Android 应用（需连接设备或启动模拟器）
npx react-native run-android

iOS（仅 macOS）：

bash 复制代码

# 启动 Metro
npx react-native start

# 新终端运行 iOS 应用（自动启动模拟器）
npx react-native run-ios

3. 核心开发技巧

UI 组件：
- 使用 React Native 内置组件（View、Text、Image、ScrollView 等）构建界面。
- 复杂 UI 可集成第三方库：如 react-native-paper（Material Design）、native-base（跨平台组件库）。
状态管理：
- 简单场景用 useState/useContext；复杂场景用 redux-toolkit 或 zustand。
路由管理 ：

使用 @react-navigation/native + @react-navigation/stack 管理页面跳转。
原生功能调用：
- 基础功能（相机、位置等）可通过 react-native-permissions 申请权限，结合 react-native-camera 等库实现。
- 自定义原生功能需分别在 android/ 和 ios/ 目录编写原生代码（Java/Kotlin 或 Objective-C/Swift），再通过 NativeModules 暴露给 JS 调用。

三、调试

1. 基础调试工具

Metro 调试菜单：
- Android：摇一摇设备或按模拟器 Ctrl+M（Windows/Linux）/ Cmd+M（macOS）。
- iOS：摇一摇设备或按模拟器 Cmd+D。
- 功能：刷新页面、开启远程调试、启用热重载（Hot Reloading）。
远程调试 ：

在调试菜单中选择 Debug ，会自动打开 Chrome 调试页面（chrome://inspect），可断点调试 JS 代码。
性能监控 ：

开启 Show Performance Monitor 查看 FPS、内存占用等指标。

2. 高级调试工具

Flipper ：React Native 官方推荐的调试工具，支持日志、网络请求、布局检查等，需在项目中安装插件（react-native-flipper）。
React DevTools ：通过 npx react-devtools 启动，可视化组件层级和状态。

四、打包发布

1. Android 打包（APK/AAB）

生成签名密钥：

bash 复制代码

keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

将生成的 my-upload-key.keystore 放入 android/app/ 目录。

配置签名信息 ：

在 android/app/build.gradle 中添加签名配置：

gradle 复制代码

signingConfigs {
    release {
        storeFile file('my-upload-key.keystore')
        storePassword '你的密钥库密码'
        keyAlias 'my-key-alias'
        keyPassword '你的密钥密码'
    }
}
buildTypes {
    release {
        signingConfig signingConfigs.release
        // 其他配置...
    }
}

生成 AAB（推荐，用于 Google Play）：
bash 复制代码
```
cd android
./gradlew bundleRelease  # Windows 用 gradlew.bat bundleRelease
```
输出路径：android/app/build/outputs/bundle/release/app-release.aab。
生成 APK（用于测试）：
bash 复制代码
```
./gradlew assembleRelease
```
输出路径：android/app/build/outputs/apk/release/app-release.apk。

2. iOS 打包（IPA）

配置证书和描述文件：
1. 登录 Apple Developer 官网，创建 App ID、开发/发布证书、Provisioning Profile。
2. 在 Xcode 中打开 ios/MyApp.xcworkspace，进入 Signing & Capabilities，选择团队并配置证书。
生成 IPA：
1. 选择目标设备为 Any iOS Device (arm64)。
2. 菜单栏选择 Product > Archive，等待编译完成。
3. 在弹出的 Archives 窗口中，选择归档文件，点击 Distribute App，按提示选择发布方式（App Store 或 Ad Hoc），最终生成 IPA 文件。

五、上架应用商店

Google Play ：

登录 Google Play Console，创建应用，上传 AAB 文件，填写应用信息（描述、截图等），提交审核。
App Store ：

登录 App Store Connect，创建应用，上传 IPA 文件（通过 Xcode 或 Transporter 工具），填写信息后提交审核。

六、常见问题

依赖冲突 ：删除 node_modules 和 package-lock.json，重新 npm install。
Android 构建失败 ：检查 SDK 版本是否匹配 build.gradle 中的 compileSdkVersion，或更新 Gradle 版本。
iOS 模拟器启动失败 ：确保 Xcode 版本与 React Native 兼容，或重置模拟器（Simulator > Device > Erase All Content and Settings）。

通过以上流程，可完成 React Native 跨平台应用的全生命周期开发。实际开发中需结合官方文档（React Native 官网）和社区资源解决具体问题。