React Native 开发准备工作

安装流程参考 React Native 官方文档 Setting up the development environment。

Node
iOS
- Xcode
- CocoaPods
- Watchman
Android
- JDK
- Android Studio

React Native 官方文档推荐在 Windowws 平台使用包管理工具 Chocolatey 安装 Node 和 JDK，这里直接在官网下载安装文件安装。

Node

打开 https://nodejs.org/en/ 下载安装 LTS 版 Node，比如 14.17.2 LTS。

PS > node --version
v14.17.2

JDK

打开 https://adoptopenjdk.net/ 下载安装 LTS 版 OpenJDK。

JDK Version:
- OpenJDK 8 (LTS)
- OpenJDK 11 (LTS)
- OpenJDK 16 (Latest)
JVM:
- OpenJDK HotSpot
- Eclipse OpenJ9

可以选择 OpenJDK 11 (LTS) + HotSpot，默认会从 GitHub 上下载安装包。如果下载速度过慢，可以使用清华大学的 AdoptOpenJDK 镜像。

PS > java -version
openjdk version "11.0.11" 2021-04-20
OpenJDK Runtime Environment AdoptOpenJDK-11.0.11+9 (build 11.0.11+9)
OpenJDK 64-Bit Server VM AdoptOpenJDK-11.0.11+9 (build 11.0.11+9, mixed mode)

Gradle

打开 https://gradle.org/releases/ 下载最新版 Gradle，比如 v7.1.1。下载完成后解压到 D:\Apps\Gradle\gradle-7.1.1 目录，并将其添加为系统变量 GRADLE_HOME，将 %GRADLE_HOME%\bin 添加到系统 PATH 环境变量中。

PS > gradle -v

------------------------------------------------------------
Gradle 7.1.1
------------------------------------------------------------

Build time:   2021-07-02 12:16:43 UTC
Revision:     774525a055494e0ece39f522ac7ad17498ce032c

Kotlin:       1.4.31
Groovy:       3.0.7
Ant:          Apache Ant(TM) version 1.10.9 compiled on September 27 2020
JVM:          11.0.11 (AdoptOpenJDK 11.0.11+9)
OS:           Windows 10 10.0 amd64

为了加速后期 Gradle 下载依赖，可以参考之前的文章日常开发中用到的一些代理配置方式设置镜像源。

Android Studio

打开 https://developer.android.google.cn/studio?hl=zh-cn 下载最新版 Android Studio，安装到 D:\Android\Android Studio 目录。

C盘空间有限，这里将 SDK 路径指向到其他磁盘。

新增环境变量：

ANDROID_SDK_ROOT 默认指向 %LOCALAPPDATA%\Android\Sdk，这里设置为 D:\Android\Sdk
ANDROID_HOME 已废弃，理论上使用 ANDROID_SDK_ROOT 代替，这里设置为 %ANDROID_SDK_ROOT%，保持向前兼容
ANDROID_PREFS_ROOT 默认指向 %USERPROFILE%，这里设置为 D:\Android（原 ANDROID_SDK_HOME 已废弃）

将 Android SDK 命令行工具添加到系统 PATH 环境变量中。

%ANDROID_HOME%\platform-tools 包含 adb 等命令
%ANDROID_HOME%\emulator 包含新版 emulator 等命令
%ANDROID_HOME%\tools 包含旧版 emulator 等命令、脚本

添加环境变量时，注意保证 %ANDROID_HOME%\emulator 在 %ANDROID_HOME%\tools 之前。

PS > adb --version
Android Debug Bridge version 1.0.41
Version 31.0.2-7242960
Installed as D:\Android\Sdk\platform-tools\adb.exe

PS > emulator -version
Android emulator version 30.7.5.0 (build_id 7491168) (CL:N/A)

如果需要为 Android Studio 设置代理，可以参考官方文档配置 Android Studio。

第一个 React Native 项目

使用 React Native CLI

$ npm i -g react-native
$ react-native init AwesomeProject --template react-native-template-typescript
$ cd AwesomeProject
$ npm run android

如果希望指定 react-native 版本，初始化时增加 --version 参数，比如：

$ react-native init AwesomeProject --version 0.64.2

如果报 template.config.js file inside "react-native" template. Please make sure the template is valid 错误，需要换成旧版 CLI。参考 For older react-native versions。

$ npm uninstall -g react-native
$ npm i -g react-native-cli
$ react-native init AwesomeProject --version 0.55.4

开发时，Android App 运行的 jsbundle 文件地址为 http://localhost:8081/index.bundle?platform=android&dev=true&minify=false。

构建 jsbundle 文件：

$ mkdir build
$ npx react-native bundle --entry-file index.js --platform android --dev false --bundle-output build/index.android.jsbundle --assets-dest build --sourcemap-output build/index.android.map

更多命令参考 Commands。

使用 Expo CLI

$ npm i -g expo-cli
$ expo init my-app -t expo-template-blank-typescript
$ cd my-app
$ npm start

Expo CLI 初始化时默认会使用 Yarn，如果希望使用 npm 则执行 expo init my-app --npm -t expo-template-blank-typescript。

Expo CLI 安装的 react-native 依赖不是来自于 npm 仓库，而是 Expo 托管在 GitHub 上的版本，比如 https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz，如果无法正常访问 GitHub，可以先初始化不下载依赖 expo init my-app --no-install -t expo-template-blank-typescript。

React Native 相关技术

React Native: A framework for building native apps with React
Metro: The JavaScript bundler for React Native
Yoga: A cross-platform layout engine which implements Flexbox
Expo: An open-source platform for making universal native apps with React
Watchman: A file watching service
Hermes: A small and lightweight JavaScript engine optimized for running React Native on Android
Flipper: A desktop debugging platform for mobile developers