React native真是个好东西，页面上的东西都由JS来渲染、处理。它是由Facebook公司开发的，秉承着：
Learn once,Write everywhere: Build Mobile APP with React.
建议参考网址：
- React Native 官方文档中文版
- React Native官网
- React Native官方文档英文版
入门安装
我的开发环境是win10，具体环境配置可去上面官方文档中文版中寻找步骤。开发的是Android项目。
React Native需要以下工具：node（需要4.0版本以上）、Android开发环境（Android SDK + Java环境）。
每个操作系统都有自己的包管理器，可以利用包管理器快速方便的下载你想要的东西：
- mac：homebrew
- window：choco
- linux：apt-get。
当然安装node和android的话，可以不适用上面这些，你直接自己下载安装也行，只是使用choco更加方便，可以看该篇文章：Windows系统的包管理器Chocolatey的安装及使用介绍
上面具体的安装我就不讲了。
创建项目
下面就是创建项目的时候了。
打开命令行，进入到你想创建项目的文件目录位置。输入如下的命令：
$ npm install -g react-native-cli
$ react-native init AwesomeProject
$ cd AwesomeProject/
前两个命令比较费时。第二个命令的话，它会帮你创建一个名叫AwesomProject的项目，创建该项目的时候，ios和android代码都会有。看下目录结构：
除了component那个文件夹是我自己创建的，其他的都是react-native帮我生成的。在项目中包括了ios和android的代码。在下面还有两个js文件，分别是index.android.js和index.ios.js。这两个文件就是后面我们要学习的react-native。那android这个文件夹都是什么东西呢？
看到了么，其实里面是个android工程，里面放着一些源代码，但是这些源代码很简单。在我们启动一个app时，需要通过androidmanifest.xml中来选择初始进入的页面，例如页面是loginActivity，然后该activity是继承自ReactActivity，并且指定该Activity由哪个JS Component来渲染、处理。所以刚刚我们提到的index.android.js就是来渲染Activity的。React Native的好处就是页面和逻辑上任何的修改，都不需要重新安装应用，只需要修改js并重新获取js即可。而这个js可以适用于Android和IOS，这也验证了Learn once,Write everywhere。
跑起来
现在项目已经创建完毕，要跑起来看看，运行如下命令（需要在工程目录文件下）：
$ react-native run-android
这个命令其实包含两个操作，第一个操作是将app目录下的工程安装在我们的手机（或者模拟器）中，第二部操作是运行小服务器。这个服务器是干嘛的，其实我们运行起来的客户端需要连接到该服务器，请求渲染页面的JS代码。
所以这句命令行你可以这么分步来操作：
- 安装app下的项目到手机中（可以使用adb install，也可以导入到android studio中来安装）。
- 运行命令：
react-native start
这句命令是用来开启服务器的，每次开启这个服务器比较慢，大概要两三分钟等待。
为什么要讲这个呢，比如你的JS代码除了什么语法或者其他错误，崩溃了，如果你运行react-native run-android的话，就太多余了，因为app代码没变，只是js代码需要重载。那么这个时候你改完js代码就不需要重新安装app，重启服务器就好了，只需运行react-native start即可。
因为手机要连到电脑开启的服务器，所以手机必须和电脑处于同一局域网，可以通过设置代码或者更改host！！！！
看下运行起来的样子（每次重启服务器要2、3分钟，比较慢）：
该命令行中可以看到，在17：32分时，客户端向服务器请求了一条数据，也就是获取渲染的js代码。
接下来看下客户端：
该页面说明客户端正在请求服务器数据。
当服务器返回数据：
客户端正确显示（这是我写的一个demo）：
如果你想要重载页面，可以摇一摇你的手机（真机摇一摇，如果是模拟器的话，按下菜单按钮 ，默认情况下是 F2，或在 Genymotion 中点击 ? M），出现如下页面：
我来解释下：
- Reload：就是重新向服务器获取数据。
- Enable Hot Reloading：当服务器的js代码变更时，会自动通知客户端刷新页面。这可是太方便了，如果你改个页面的参数，只要一点击保存，客户端立马能够反映出来，再也不用像以前那样重新编译了。
- Toggle Inspector：可以让你查看一些参数，比如访问服务器的结果。
- Show Perf Monitor：查看页面绘制属性。
- Dev Setting：主要是设置，点进去的话可以修改一些一些参数。
例如那个Debugserver host & port for device，如果你是在真机上测试，你的手机和你的电脑连至同一局域网后，需要点击这个输入你的电脑的ip和端口（8081），我输入的是：10.240.88.201:8081，不设置的话，你页面上无显示。如果是模拟器的话，就不用了，因为他查询localhost的话，是可以连到本机的服务器的。 上面这些都是让你使用demo的步骤。
