一、前言
1.准备
在创建RN之前，我们需要先安装相应的工具和搭建环境。
可以参考我上一篇文章：React Native入门系列：如何搭建RN环境（Windows篇）
2.目标
本章例子中文章达到目标：
- 创建RN项目步骤
- 在创建中遇见的问题解决
- 配置WebStrom
建议下载最新版WebStrom： 官方最新版WebStrom下载地址
- 使用WebStorm+AndroidStudio来写RN程序
3.项目地址
二、开启大表哥代码模式
1.创建RN项目
当你的项目创建完毕后，会在你所指定创建的文件夹下面多出一个文件夹，这个就是你当前创建的RN Project，用webStrom打开项目，目录结构大致如下：
-
此刻我们应该启动服务端（packager），我们新打开一个cmd窗口，定位到项目根目录，命令如下：
react-native start
或者
npm start
启动完成后，先关联设备，这样才能够在手机上面正常调试：
手机的wifi和电脑处于同一个局域网下面，并使用8081端口（切记要保证手机和电脑在同一网段，且没有防火墙阻拦）。
可通过ipconfig命令查看电脑IP
然后在手机上面手动添加代理
手机添加关联完毕！（这个时候你用手机打开任意App可以看见你的npm在跑）
-
打开手机调试模式连接电脑，新建一个cmd窗口（切记 保持服务端（packager）在运行），在项目根目录下输入运行命令（以Android为例子），命令如下：
react-native run-android
等命令执行完毕，app会自动运行并且打开
这个时候有的手机会显示一片红色，这个时候，一般是服务端正在加载数据或者加载错误，解决办法就是点击下面中间的RELOAD重新加载,或者等一会儿。
有的手机做完了上面所有步骤，发现界面一片空白，这种情况是因为悬浮窗权限被禁用，去权限管理里面打开权限，重新打开APP，就可以解决该情况。
启动成功界面应该是下图：
此时此刻，你已经能够自己创建项目并且运行了。
2.安装配置WebStrom
注意：建议使用2017系列版本的WebStrom，因为后面我们要用到npm功能，老版本是没有的。
文章开头我已经给出了最新版WebStrom下载地址，这里我说一下2017版本破解方法：
2017.2.27更新
选择“license server” 输入：http://idea.imsxm.com/
2016.2.2 版本的破解方式：
安装以后，打开软件会弹出一个对话框；选择“license server” 输入：http://114.215.133.70:41017
点击Open，打开项目，点开index_android.js发现有报错，原因是由于 React Native 是基于 React 的，而 React 使用的是 JSX 语法，因此，使用 WebStorm 开发 React Native 之前，我们首先需要设置支持的 Javascript 语法，点击 WebStorm-Preferences，在打开的对话框中选择 Javascript language version 为 React JSX(有的版本是JSX Harmony) 即可在代码编辑器中识别 JSX。
维基百科，什么是npm（全称Node Package Manager，即node包管理器）？
点击Edit Configurations
点击添加一个npm
配置npm参数
配置成功后，现在我们回到编辑界面基本上就可以装逼了
首先，我们可以关闭之前我们用cmd启动的服务，现在改为直接在WebStrom来启动这个服务，如图：
这个时候我们就可以很容易出现以下错误
提示 “Packager can’t listen on port 8081” ，说明 8081 端口被占用，这里有两个 解决方案：
方案一： 可以检查是什么程序占用了这个端口并杀掉它
方案二：修改默认8081端口（记得手机设备端口号对应修改）
完了过后就可以愉快的启动服务了。
打开IDE中的terminal窗口（切记 不要关闭服务,保持run窗口的数据在跑）
然后，输入命令： react-native run-android 回车安装到手机
这样，通过WebStrom就完成了整个RN程序运行。现在我们就可以开始用代码搞事情了。
下面，我都以Android RN程序为例子：
打开index.android.js文件可以修改，然后 react-native run-android重新安装
Load完成后，效果如下：
1.clone ReactNative-LiveTemplate项目到本地
React Native默认不能智能提示代码，github有一个开源的插件：ReactNative-LiveTemplate开源地址。
ReactNative的代码模板,包括:
组件名称
Api 名称
所有StyleSheets属性
Mac中调用ReactNative组件时, 首先 按下 command + J , 然后输入属性名的 首字母 如输入onP 自动提示 onPress, onPressIn, onPressOut, ....
2.添加ReactNative.jar导入到setting
导入成功后，效果如下：
说明代码智能提示设置导入成功！
2.使用WebStrom+AndroidStudio协作开发
WebStrom用做服务端，保持服务开启，并且在WebStrom中可以修改js逻辑代码
AndroidStudio可以用于安装APP，和修改Android App原生代码
1.导入RN项目结构中的android到AS中，等待build成功，如下图
2.现在我们可以run来安装APP可以替代 react-native run-android命令
三、RN学习推荐
如果我的文章有帮助到您，请点个赞，您的鼓励将是我写作的最大动力
