React Native 开发准备工作

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

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

相关链接