前言
React Native(简称RN)从诞生以来，就受到了广大开发者的追捧。相比于Native开发，RN开发更为灵活，而且支持跨平台（Android和iOS同时支持），也更方便热更新，最重要的是它基本上能够达到与Native App一样的渲染和体验效果。虽然RN目前还有许多功能不够完善，同时也存在一些兼容性问题，作为Native开发者，我们还是可以通过混合开发（RN+原生开发）的模式来规避这些坑，这样也能兼具RN和原生开发的共同优势。
准备
对于前端工程师来说，学习RN要容易得多，但是对于原生开发者来说，学习成本还是相对较大：
首先，你需要有一定的JavaScript基础，对于没有js基础的同学，想直接就从RN开始，那估计是相当痛苦的。
其次，React作为RN的核心，在开始学习RN之前，至少要对React相关的基础知识有所了解。
如果完全没有接触过前端，想学习RN的话，建议还是可以先学习一下html/css、js等基础知识，再开始React、RN的学习，这样可能前期花费的时间和精力比较多，但是后期就要轻松很多，不用在学习RN的中途还要去恶补一些前端的基础知识。
搭建开发环境
因为我使用的是Windows系统，所以下面就介绍下如何在Windows系统下搭建RN开发环境。
参考ReactNative中文网，首先我们需要装Python2和Node，考虑到可能chocolatey国外网站可能访问较慢，我们就直接冲Python官网下载Python2，下载地址：www.python.org/downloads/
选择2.7.13版本，注意不要选Python2以上的版本，目前RN还不支持。然后在Node.js中文网下载最新的Node.js的msi安装包，注意根据自己的系统位数选择。下载地址：nodejs.cn/download/
下载完成后直接安装，安装完成后建议设置npm镜像以加速后面的过程：
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global安装Yarn、RN的命令行工具（react-native-cli），Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。
npm install -g yarn react-native-cli安装完yarn后也要设置镜像源：
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global安装开发工具
我是做安卓开发，已经有了AndroidStudio开发工具，AndroidStudio安装和android-sdk的配置我就不介绍了，需要注意的是android-sdk路径的环境变量ANDROID_HOME必须要配置，如果之前没有的需要加上。
RN的开发工具有很多，像是Atom、Sublime、WebStorm等前端开发工具都能进行RN的开发。由于笔者长期使用AndroidStudio，所以我就用WebStrom了，因为它们都是由JetBrains出品，操作界面、快捷键、插件都是一致的，不需要进行二次学习。
WebStrom下载地址：www.jetbrains.com/webstorm/do…
下载安装后，只有30天的免费使用，需要破解的话，网上有很多方式。
创建HelloWorld
打开WebStorm，点击Create New Project创建一个新的RN工程：
选择左侧的React Native标签，location选项为你的工程目录和工程名称HelloWorld，Node interpreter和React Native选项为默认的就行。
点击create后，就开始构建工程了，第一次构建过程中要去下载RN的依赖包，可能时间比较长，耐心等待。构建完成后，可以看到RN项目的工程目录结构：
其中有几个比较关键的文件：
- -test-，为测试文件，里面存放一些测试用的js文件。
- android，就是一个原生的android工程项目，可以用androidStudio打开进行原生开发。
- ios，就是一个原生的ios工程项目，可以用xcode打开进行原生开发。
- node_module，下载的依赖库都存放在里面，包括React和React Native，相当于* AndroidStudio的External Libraries。
- package.json，RN工程的远程依赖，通常是在根目录通过命令行
npm install xxxxxx --savet添加一个库，添加完成后，会把依赖信息自动写在package.json里面，相当于AndroidStudio的build.gradle。 - index.android.js，这是android的React Native入口文件。
- index.ios.js，这是ios的React Native入口文件。
点击WebStorm右上角的下拉按钮，选择Android：
界面上就会出现运行和调试按钮了：
连接到真机，点击执行。执行的过程中会添加react和react-native的依赖。同时如果默认的gradle版本是你没有使用过的话，也会自动去下载，所以耐心等待。当然最好是在执行之前通过AdnroidStudio打开RN工程下的android项目，将gradle版本修改到本地已有的版本。
运行时，在真机上可能遇到白屏情况，需要开启悬浮窗权限。也极有可能会出现下图左边的错误，点击RELOAD后，又会出现右边的fix方案：
一般的最有可能的还是最后一种情况，即是运行设备（真机或模拟器）与packager server没在同一个ip，就不能用localhost了。
摇一摇手机，出现对话框：
点击Dev Settings，进入设置界面，点击Debug server hoset &port for device，弹出对话框，输入自己电脑所在的局域网的ip:8081
点击确定后，回到主界面，摇一摇手机，再次点击对话框中的reload，就运行成功了：
