React Native - Windows系统下环境搭建（开发第一个应用）
作者：hangge | 2017-08-02 08:10
React Native 开发环境可以在 Windows 操作系统下搭建，也可以在 Mac 操作系统下搭建。但如果有条件还是建议在 Mac 下搭建，因为 Windows 操作系统下最大的问题就是无法进行 iOS 平台的测试。
关于 Mac 操作系统下的环境搭建我之前已写过文章：React Native - macOS下环境搭建（开发第一个应用）。本文接着演示如何在 Windows 系统下搭建 React Native 开发环境。
一、环境的搭建
1，安装 Android 环境
在安装 React Native 开发环境前，要保证 Windows 下已经安装好了 Java 和 Android SDK，并配置好相关的环境变量。
具体操作可以参考我的另一篇文章：Android - Windows下开发环境的搭建
2，安装 Node.js
下载地址：https://nodejs.org
将下载下来的 msi 文件运行安装即可。
3，Python2
（1）进入其官网，下载 Python2 安装包。地址：https://www.python.org/downloads/
（2）安装完毕后把 Python 的安装路径添加到系统环境变量 PATH 中：
（3）在 cmd 终端命令行下输入“python -V”，出现版本信息则说明安装成功了。
4，安装 react-native-cli
（1）在终端中输入如下命令通过 npm 安装 react-native-cli 的命令行工具（其中 -g 表示全局安装）
npm install -g react-native-cli
（2）完毕后输入“react-native -v”，出现版本信息则说明安装成功了。
附：使用淘宝 npm 镜像安装 react-native-cli
我们使用 Node.js 的 npm 命令需要访问国外的站点，但由于国内网络的问题，可能安装 react-native-cli 的速度会比较慢，甚至完全无法安装。
好在淘宝为国内开发者提供了 npm 镜像服务，具体操作步骤如下：
（1）在命令行窗口输入如下命令，安装 nrm 模块。这个可以方便我们切换 npm 下载源。
npm install -g nrm
（2）接着执行如下命令安装 npm2
npm install -g npm@2
（3）执行如下命令创建一个名为 cnpm 的安装点，后面我们可以使用这个安装点从淘宝提供的 npm 镜像站点安装 React Native。
npm install -g cnpm --registry=https://registry.npm.taobao.org
（4）以后我们 npm 后接参数的命令都可以把 npm 换为 cnpm 来加快速度，比如安装 react-native-cli
cnpm install -g react-native-cli
二、创建项目
1，在命令窗口中进入需要创建项目工程的目录位置
比如我们想把工程创建在如下目录中：
2，创建工程项目
运行如下命令创建一个名为 HelloWorld 的项目。
react-native init HelloWorld可以看到 Documents 文件夹下已经成功地创建了这项目。
项目文件夹里面的内容如下:
三、使用模拟器运行程序
（由于模拟器启动运行都比较慢，我还是更推荐使用真机进行调试）
（1）启动模拟器后，我们先在命令行窗口中输入“adb devices”命令，确定会显示出当前模拟器。
（2）接着进入进入工程目录，执行如下命令启动程序。这条命令会编译项目，并将编译好的安装包安装到模拟器中。
react-native run-android注意：由于编译时需从网路下载某些依赖编译包，用时会稍长。不过编译包只需下载一次，将来如果再次运行这个命令把应用装到另一部 Android 手机上时，用时就会很短。
（3）运行效果如下：
而且除了会启动模拟器外，还会启动一个终端 React Packager。这个窗口在我们调试应用的过程中需要一直运行，我们可以将其最小化，但不要关闭它。
四、使用手机运行程序
（1）首先将手机与电脑通过数据线相连。然后再命令行窗口执行如下命令：
adb devices
（2）如果像下图一样显示出手机信息，则说明手机已经安装了正确的驱动并打开调试模式，连接没有问题了。
（3）接着进入进入工程目录，执行如下命令启动程序。这条命令会编译项目，并将编译好的安装包安装到手机中。
react-native run-android注意：运行前确保手机与开发电脑使用同一个局域网络。
五、再次运行项目
不管是模拟器还是真机，我们第一次运行 RN 项目时需要用“react-native run-android”命令来编译项目。但只要一旦编译成功，并在手机或模拟器上安装 RN 项目后，我们就不需要再次运行这个命令了。
（1）比如我们重启了电脑，重新把手机连上电脑（或者打开模拟器）。
（2）接着运行如下命令通过 adb 反向代理端口，将调试电脑的 8081 端口反向代理到测试机上。
- -s 后的字符串是 Android 手机设备的 ID（通过 adb devices 可以查看）
- 这个命令其实第一次运行时也会执行，只不过“react-native run-android”命令中已经代我们输入执行了。
adb -s 32309910caf57f11 reverse tcp:8081 tcp:8081当电脑只连接了一个 Android 设备时，这条命令可以简化为：
adb reverse tcp:8081 tcp:8081
（3）执行完反向代理命令后，进入项目目录，执行如下命令运行 React Packager。
react-native start
（4）这是我们就可以直接在手机或是模拟器上打开之前安装的 RN 应用了。（为方便使用，我们可以将上面代码都放到一个批处理文件中，以后点击这个文件即可。）
全部评论（0）