React Native 是一种可以让开发者使用 React 前端来创建开发 Android 和 iOS 的原生应用的技术。它诞生于 Facebook的 一个内部的黑客马拉松项目。2015年，由Facebook开源React Native 。关于React Native 的介绍就不多说了，大家有兴趣的可以去看一下我之前的《React Native移动开发实战》3：www.ptpress.com.cn/shopping/bu…。
一、环境搭建
官网开发文档：reactnative.cn/docs/enviro…
安装Node.js
Node.js本身并不是一门开发语言，也不属于任何JavaScript技术框架，而是Ryan Dahl开发的一个基于Google Chrome V8引擎的JavaScript运行环境。它使用一个事件驱动、非阻塞式I/O模型，让JavaScript具备了开发服务端接口的能力。同时，Node.js提供的npm包管理器还是全球最大的前端开源库管理系统之一。
由于运行React Native需要Node.js环境的支持，如果还没有安装，可以从Node.js的官网下载对应操作系统的安装包。下载安装包时，推荐下载最新的LTS版本，因为LTS版本是最稳定的版本，出现问题的概率较低。下载完成后，双击安装包安装即可。
如果本地已经安装了Node，那么这一步跳过。注意检查下版本号，Node最好需要12或者12+，我们可以使用node -v先检查下版本号。如果低于这个版本，建议升级或者重装。
brew install node
然后是安装Yarn，Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载，安装命令如下。
npm install -g yarn
安装完 yarn 之后就可以用 yarn 代替 npm执行命令操作了。例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。
安装Cli
如果你是一个React Native的新手，最简单的方式就是用expo cli。expo是个rn的构建工具，它可以让我们快速开始一个rn项目，你可以在web端查看运行效果，也可以用真机或者模拟器查看。
如果你想用react native cli开启一个项目，则需要按照后面的步骤继续安装。当然，因为网络原因，相较于expo cli，国内使用更多的还是react native cli。
安装HomeBrew
brew是基于Ruby开发的包管理器，安装命令如下。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
如果安装出错，可以使用下面的镜像：
/bin/bash -c "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install.sh)"
安装watchman
watchman是Facebook的一个开源项目，它可以用来监视文件并记录文件的变更，当文件变更的时候它可以触发一些操作，比如执行一些命令等。
brew install watchman
iOS环境
mac上直接去App store安装即可，注意安装Xcode10或者10+。安装Xcode的同时也可以装上iOS模拟器以及其他相关的工具。
第一次启动的时候，需要安装最新的SDK。然后，选择Platforms，安装iOS模拟器。
当然，也可以用open -a simulator启动ios虚拟机查看虚拟机安装是否成功，开发时候不需要这个命令，直接使用XCode启动就行。
接下来，还需要安装cocoapods，cocoapods是苹果开发的库管理工具，安装命令如下。
brew install cocoapods
#或者
sudo gem install cocoapods
Android环境
安装JDK
首先，去甲骨文官网下载Java安装包，下载是需要选择自己电脑对应的版本。
安装 JDK 后，需要配置下Java的环境变量，如我的Mac的环境变量如下：
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk-11.0.2.jdk/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH:.
export CLASSPATH=$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:.
然后，可以在命令行中输入 javac -version命令来查看安装的Java版本信息。
安装Android Studio
Android Studio 是开发 Android 应用的官方 IDE，包含构建 Android 应用所需的所有功能。
首先，下载和安装 Android Studio，如无法打开链接，请自行搜索可用的下载链接。安装界面中选择"Customize"选项，确保选中了以下几项：
- Android SDK
- Android SDK Platform
- Android Virtual Device
打开在Android Studio 的欢迎界面中找到 SDK Manager。点击"More Actions"，然后就能看到"SDK Manager。
SDK Manager 还可以在 Android Studio 的"Preferences"菜单中找到。具体路径是 Appearance & Behavior* → System Settings → Android SDK。
当然，为了方便后面使用Android命令，我们还需要配置下Android的环境变量，如下所示。
export ANDROID_HOME=/Users/xianghong/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
二、创建项目
如果你之前全局安装过旧的react-native-cli命令行工具，请使用npm uninstall -g react-native-cli命令卸载掉它以避免一些冲突。
npm uninstall -g react-native-cli @react-native-community/cli
然后，使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目。这个命令行工具不需要安装，可以直接用 node 自带的npx命令来使用：
npx @react-native-community/cli init AwesomeProject
创建成功的截图如下。
如果此过程中CocoaPods安装失败，则可以在ios目录下执行如下命令再手动安装即可。
cd ios
bundle exec pod install --verbose
Xcode 的环境配置文件【可选】
从 React Native 版本 0.69 开始，可以使用模板提供的 .xcode.env 文件来配置 Xcode 环境。
.xcode.env 文件中包含一个环境变量示例，用于在 NODE_BINARY 变量中导出 node 执行文件的路径。这是将构建基础结构与node系统版本解耦的推荐做法。如果与默认值不同，则应使用您自己的路径或您自己的node版本管理器来自定义此变量。
此外，您还可以在构建脚本阶段中添加任何其他环境变量并导入 .xcode.env 文件。如果您需要运行需要特定环境的脚本，这也是将构建阶段与特定环境解耦的推荐做法。
启动iOS端
执行以下命令即可启动iOS端。
cd AwesomeProject
npx react-native run-ios 或者 yarn ios
如果没有任何的错误，运行的效果如下图。
启动android端
使用下面的命令启动android端。
cd AwesomeProject
npx react-native run-android 或者 yarn android
运行效果如下。
HotReLoad
为了方便大家快速的体验React Native的魅力，我们打开示例项目lib目录下的main.dart文件，然后修改欢迎语述。并且，还可以实现应用的热更新。到这里，大家就可以开始写代码了。
