自年初出版了《React Native移动开发实战2》之后，今年基本就没怎么关注RN了，一方面由于工作比较忙，另一方面我把时间主要用到了《Flutter跨平台应用开发实战》的写作上。最近由于时间比较空闲，所以回头看了下RN，目前RN已经更新到了0.63版本，延续了之前1-2个月更新一个小版本的周期。

对比年初的0.60版本，RN在环境搭建方面做了很多的升级，总的来说，搭建RN的步骤变短了，新手的学习成本也降低了。

目前，RN支持macOS和Windows，根据操作系统、针对的目标平台不同，RN环境搭建的步骤有所不同。

React Native环境搭建

在macOS中搭建RN环境，需要安装入汛依赖软件。

• Node
• Watchman
• JDK
• Android Studio
• Xcode

除此之外，为了开发RN应用，我们还需要按照WebStrom和VScode等开发软件。

安装Node

Node.js 本身并不是新的开发语言，也不是 JavaScript 框架，而是一个 JavaScript 运行时环境，底层使用 Google Chrome V8 引擎。Node.js 就是在 Google Chrome V8 引擎的基础上进行的封装，以便创建快速、高效、可扩展的 Web 应用。同时，Node.js 的包管理器 npm，也是全球最大的开源库生态系统管理之一。

安装 Node.js 前，需要从 Node.js 官网下载当前系统对应的安装包。安装时推荐使用最新的 LTS 版本，因为 LTS 版本维护的周期较长且稳定性较好。Node.js的安装比较简单，只需要在下载完成后双击对应的安装包，根据向导提示，单击相应的【继续】或【同意】按钮，最后单击【安装】按钮即可完成安装。

安装完成之后，可以使用 node-v 命令来验证是否安装成功.同时，安装最新版的 Node.js 之后，不需要再安装 npm 包管理工具，因为最新版的 Node.js 已经默认集成了 npm管理工具。当然，实际开发中还可以使用 nvm 来安装和管理 Node.js，并且使用cnpm 来代替 npm，因为 cnpm 使用的是淘宝源，所以对于国内的开发者来说下载的速度更快。相关的命令如下所示。

# 使用nrm工具切换淘宝源
npx nrm use taobao

# 如果之后需要切换回官方源可使用
npx nrm use npm

除了通过安装包来安装Node.js之外，还可以使用macOS的Homebrew来安装Node和Watchman。我们可以在命令行中执行下列命令来安装Node和Watchman。

brew install node
brew install watchman

安装Watchman

Watchman是 Facebook 开源的一款用来监视并记录文件变更的工具，当文件发生变更时可以触发一些操作来记录文件的变化。在React Native开发中，官方推荐安装Watchman，因为安装此工具可以提高开发时的性能和效率。安装Watchman的命令如下。

brew install watchman

安装Yarn

Yarn是 Facebook 开发的一款JavaScript 包管理器工具，用来替代 npm ，Yarn可以加速 Node 模块的下载和构建。Yarn的安装命令如下。

npm install -g yarn

安装完 yarn 之后，就可以使用yarn来替换npm了，如使用yarn代替npm install命令来安装第三方库。

搭建iOS环境

众所周知，使用 React Native 开发 iOS 应用时需要 macOS 操作系统的支持，所以如果经济条件允许的话最好购置一台 Mac 电脑。只有使用React Native 同时开发 iOS 和 Android 应用，才能发挥出 React Native跨平台开发的优势。

目前，使用 React Native 开发 iOS 端的应用需要 Xcode 10 及更高版本的支持，如果还没有安装 Xcode，可以从 App Store 或者Apple 开发者官网上下载并安装，如下图所示。

需要强调的是，Xcode 安装程序必须通过 Apple 官网或 App Store 下载。2015 年 9 月发生的 XcodeGhost 非法代码植入事件，就是因为开发者下载的是非官方 Xcode 安装程序。

Xcode 的命令行工具

开发iOS应用时需要一些命令行工具的支持，启动 Xcode，并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode 的命令行工具中包含一些必须的工具，比如git等。

安装CocoaPods

CocoaPods是苹果开发的一款负责管理iOS项目中第三方开源库的工具，使用Ruby语言编写。从0.60 版本开始，React Native 项目的 iOS 版本需要使用 CocoaPods 来管理依赖，可以使用下面的命令来安装 Cocoapods。

sudo gem install cocoapods
//或者
brew install cocoapods

说明：如果使用的 macOS 版本低于 10.15 (Catalina) 可能会出现安装错误，此时可以尝试安装较旧一些的版本，如1.8.4版本，命令如下。

sudo gem install cocoapods -v 1.8.4

安装Android环境

由于 React Native 应用的开发和运行都需要依赖原生平台，所以搭建 ReactNative 环境时需要安装原生 Android 和 iOS 开发环境。

由于搭建 Android 开发环境需要 Java 环境的支持，因此安装Android环境需要先从 JDK 官网下载和安装操作系统对应的 JDK 版本进行安装。安装完成之后，可以使用Java命令工具来检查 是否安装成功，如果成功输出版本信息，则表明 Java 安装成功。

同时，为了方便使用Java，可以给Java配置一下环境变量，如下所示。

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_261.jdk/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH:.
export CLASSPATH=$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:.

Java环境安装完成之后，接下来还需要安装 Android 开发工具 AndroidStudio 和 Android SDK Tools。可以从 Android Studio 官网下载Android Studio 及命令行工具 Android SDK Tools 进行安装。

安装完成之后即可启动 Android Studio。第一次打开 Android Studio时，需要在设置面板中配置Android SDK Tools 的路径 Android SDKLocation。成功配置 Android SDK Tools 的路径后，接下来就慢慢的下载 Android SDK 。

需要说么是，React Native 的 Android 环境需要 Android SDK Build-tools version 23.0.1 及以上版本的支持，所以确保本地已经安装了相关的Android SDK。安装完成之后，为了方便使用Android的命令，可以设置Android的环境变量，如下所示。

export ANDROID_HOME="/Users/mac/Android/sdk"    
export PATH=${PATH}:${ANDROID_HOME}/tools						
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

如果是 Windows 操作系统，可以依次点击【计算机】→【属性】→【高级设置】→【环境变量】打开环境变量面板，然后添加环境变量参数。如果是Window操作系统，可以参考上面的步骤来搭建。

新建项目

0.60版及之后版本不需要再安装React Native开发工具链，如果之前全局安装过旧的react-native-cli命令行工具，可以使用下面的命令来卸载它，以避免创建项目时出现一些冲突。

npm uninstall -g react-native-cli

然后，使用npx的init命令即可创建一个新项目，如下所示。

npx react-native init AwesomeProject

如果要创建指定版本的RN项目也是可以的，只需要在创建项目时添加版本号即可，如下所示。

npx react-native init MyApp --version

然后，等待后台创建项目，如下图所示。

运行项目

使用WebStrom或者在项目目录中运行yarn ios或者yarn react-native run-ios运行项目即可，如下所示。

cd AwesomeProject
yarn ios
# 或者
yarn react-native run-ios

然后，就可以看到 iOS 模拟器自动启动并运行你的项目，如下图所示。 当然，我们还可以打开原生工程，然后运行原生工程。不过，在打开iOS项目时，0.60 版本之后的主项目文件是.xcworkspace，不是.xcodeproj。