React Native基础与入门（一）--搭建开发环境

什么是React Native？

React Native是Facebook开源的一套用于开发移动端跨平台App的技术框架，其代码托管在GitHub上，目前已有一千多名参与者向它贡献代码。有兴趣的可以去查看源码，GitHub地址为：

https://github.com/facebook/react-native

Window平台搭建React Native开发环境

需要安装的工具

Note.js

React Native Command Line

Android Studio/Xcode

React Dev Tool安装

安装Note.js

首先去Note.js官网，下载对应的安装包 https://nodejs.org/en/，安装完成后，打开CMD终端：

安装React Native Command Line

npm install -g react-native-cli 该过程需要漫长的等待，请耐心

React Native命令行工具安装成功后，我们可以通过react-native --help来查看支持的所有命令

安装Android Studio/Xcode

这里不作详细的介绍，相信每个移动端开发者都可以做到！

安装React Dev Tool

虽然React Dev Tool在后来的版本中支持Firefox浏览器，但目前对它的支持仍然不是很好，因此建议大家选择通过Chrome浏览器来运行React Dev Tool。考虑到Google网站国内无法访问的原因，所以不能用普通的方法安装React Dev Tool。需要先从国内其他网站下载Chrome浏览器独立版安装包，下载完成后进行安装。

使用任意浏览器打开网址：https://github.com/facebook/react-devtools/releases，下载最新版本的react-devtools-x.xx.x.crx文件。打开Chrome浏览器，单击右上角的菜单按钮，在弹出的菜单中选择“更多工具”，然后再左侧边栏点击“扩展程序”，将下载的crx文件直接拖入Chrome的空白处，这是会弹出确认框确认安装，安装完成后，在“允许访问文件网址”前打钩。

安装好界面如下：

创建第一个React Native应用

react-native init FirstApp(项目名称)

由于该过程会去npm服务器上下载项目中依赖的工具，npm服务器在国外，导致该过程花费的时间较长。在这里我们可以设置一个淘宝的npm镜像服务器，这样访问的速度会大大提高。

注：下图中的目录为Note.js的安装目录

初始化完成之后，就可以看到下面的界面：

然后我们打开FirstApp项目的根目录会看到如下项目结构：

运行React Native项目

首先保证必须有手机或者模拟机连接电脑

方法1：通过命令行启动应用

切换到项目的根目录，react-native run-android

这个命令会启动js服务器，如下图：

终于看到第一个错了：

意思很清楚，我忘了配置ANDROID_HOME环境变量，配置完成后，记得重启终端哦！

再次运行，终于成功啦！

方法2：通过Android Studio方法启动应用

React Native项目的根目录中有个android目录，直接导入就行。

Ctrl + M 可以打开开发者菜单：

rr: Reload

上面是连接的模拟器，如果连接真机，可能会出现下面的错误：

解决方法如下：
如果是Android 5.0+(API 21)，那么在命令行输入“adb reverse tcp:8081 tcp:8081”，执行这条命令，如果手机连接正常，则不会出现任何显示。这条命令通过adb反向代理端口，将调试电脑的8081端口反向代理到测试机上。

如果不是 Android 5.0+ (API 21) ，那么就没办法通过 adb reverse 进行调试，需要通过 WiFi 来连接上你的开发者服务器。

让调试用电脑和你的手机必须处于相同的WiFi网络下

打开震动菜单 (摇动设备)

前往 Dev Settings

选择 Debug server host for device

输入调试用电脑的局域网IP

点击Reload JS

如果在Windows环境下，手机在安装好之后会自动启动刚才安装的应用程序，但这时你看到的是红色的屏幕，因为电脑上的服务环境还没有启动。在命令行窗口输入“react-native start”命令。

当开发者点击手机大红屏上的Reload按钮，或者选择调试菜单中Reload菜单项，或者修改了React Native代码并保存后，调试服务器都会马上对代码进行重新编译。