React Native 开发环境搭建

一、前言 React Native 是Facebook推出的一个移动跨平台框架，就是使用JavaScript和React 编写原生移动应用即Android和iOS应用; React Native应用是真正的移动应用，并不是‘“网页应用”，或者“HTML5应用”，又 或者“混合应用”；React Native编写的应用，从使用感受上和用Obejct-C或者Java编写的应用几乎是无法区分的；React Native所使用的基础组件和原生应用完全一样；

二、环境搭建 我们这里的环境搭建是以Windows为开发平台,Android为目标平台来搭建React Native 开发环境的;

需要安装的依赖 Node、Python2、JDK、Android Studio

1.安装Node Node下载地址：https://nodejs.org/en/ 注意：Node的版本应该大于等于12，安装完Node之后建议设置npm镜像（淘宝源）以加速后面的过程（或者使用科学上网工具）

使用nrm工具切换淘宝源，在cmd中使用以下命令

npx nrm use taobao

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载， 在cmd中执行以下命令

npm install -g yarn

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。

2.安装Python2 Python的下载地址：https://www.python.org/getit/ 注意：Python 的版本必须为 2.x（不支持 3.x） 3.JDK 从Oracle官网下载JDK,配置环境变量; Windows下配置JDK环境变量步骤太常见了，就不做详细介绍 注意：JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本） 4.安装Android Studio 虽然你可以使用任何编辑器来开发应用（编写 js 代码），但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境。 安装好Android Studio之后，需要配置Android的环境变量 （1）配置 ANDROID_HOME 环境变量 React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译

-打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录

（2）把一些工具目录添加到环境变量 Path 中 打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量，选中Path变量，然后点击编

辑。点击新建然后把这些工具目录路径添加进去：platform-tools、emulator、tools、tools/bin

%ANDROID_HOME%\platform-tools

%ANDROID_HOME%\emulator

%ANDROID_HOME%\tools

%ANDROID_HOME%\tools\bin

如果已经打开了cmd，cmd窗口需要关闭后重新打开，这样cmd中执行一些编译Android应用操作时，新的环境变量才能生效。

三、创建一个React Native项目

（1）创建一个React Native项目

React Native的环境搭建好之后，我们就可以创建一个React Native项目了; 在CMD命令行中输入以下命令创建一个React Native项目

npx react-native init ReactNativeDemo

这里的RaectNativeDemo是项目名称

（2）编译并运行创建的React Native项目 我们这里的目标平台是Android ; -首先你的步骤一中搭建环境变量时，Android环境变量配置成功； -然后要保证启动了一个Android模拟器，或者连接上了真机； 可以在cmd中通过adb devices查看是否打开了模拟器或者是否连接上了真机 -在cmd中进入到项目目录,然后使用以下命令编译运行项目

yarn android

或者

yarn react-native run-android

四、React Native项目代码编辑器 我们可以使用任何编辑器来编写React Native代码，这里推荐两个比价好的编写React Native代码的编辑器； （1）WebStorm 下载WebStorm编辑器 https://www.jetbrains.com/zh-cn/webstorm/ WebStorm编辑器试用到期解决办法:https://www.downkuai.com/soft/118668.html WebStorm配置ReactNative开发 可参考： https://pgzxc.com/posts/c8be3adf.html https://pgzxc.com/posts/c8be3adf.html

（2）Visual Studio Code 下载Visual Studio Code https://code.visualstudio.com/ 配置React Native开发 在Visual Studio Code的Extensions中搜索React Native Tools 插件安装 在CMD中创建一个React Native项目 将创建好的项目拖到Visual Studio Code中 在Run下点击 Add Configuration 在配置中选择 React Native :Debug Android