React Native入门系列：创建我的第一个RN Project

一、前言

1.准备

在创建RN之前，我们需要先安装相应的工具和搭建环境。
可以参考我上一篇文章：React Native入门系列：如何搭建RN环境（Windows篇）

2.目标

本章例子中文章达到目标：

• 创建RN项目步骤
• 在创建中遇见的问题解决
• 配置WebStrom

建议下载最新版WebStrom： 官方最新版WebStrom下载地址

• 使用WebStorm+AndroidStudio来写RN程序

3.项目地址

二、开启大表哥代码模式

1.创建RN项目

• 在E盘根目录下 创建一个ReactSpace文件夹 用于储存RN项目

• cmd打开dos命令窗口，开始创建RN项目，如下命令：

  react-native init FirstRNProject
  

初始化创建项目.png

• 当你的项目创建完毕后，会在你所指定创建的文件夹下面多出一个文件夹，这个就是你当前创建的RN Project，用webStrom打开项目，目录结构大致如下：

RN项目结构.png

• 此刻我们应该启动服务端（packager），我们新打开一个cmd窗口，定位到项目根目录，命令如下：

    react-native start 
  

或者

    npm start

启动服务端.png

• 启动完成后，先关联设备，这样才能够在手机上面正常调试：

手机的wifi和电脑处于同一个局域网下面，并使用8081端口（切记要保证手机和电脑在同一网段，且没有防火墙阻拦）。
可通过ipconfig命令查看电脑IP

查看IP.png

然后在手机上面手动添加代理

手动代理.png

手机添加关联完毕！（这个时候你用手机打开任意App可以看见你的npm在跑）

• 打开手机调试模式连接电脑，新建一个cmd窗口（切记 保持服务端（packager）在运行），在项目根目录下输入运行命令（以Android为例子），命令如下：

    react-native run-android
  

等命令执行完毕，app会自动运行并且打开
这个时候有的手机会显示一片红色，这个时候，一般是服务端正在加载数据或者加载错误，解决办法就是点击下面中间的RELOAD重新加载,或者等一会儿。

加载错误.png

有的手机做完了上面所有步骤，发现界面一片空白，这种情况是因为悬浮窗权限被禁用，去权限管理里面打开权限，重新打开APP，就可以解决该情况。
启动成功界面应该是下图：

成功结果.png

此时此刻，你已经能够自己创建项目并且运行了。

2.安装配置WebStrom

注意：建议使用2017系列版本的WebStrom，因为后面我们要用到npm功能，老版本是没有的。

• 安装WebStrom

文章开头我已经给出了最新版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。

设置JSX.png

• 配置npm

维基百科，什么是npm（全称Node Package Manager，即node包管理器）？

点击Edit Configurations

配置npm.png

点击添加一个npm

添加npm.png

配置npm参数

参数配置.png

配置成功后，现在我们回到编辑界面基本上就可以装逼了

• 启动服务

首先，我们可以关闭之前我们用cmd启动的服务，现在改为直接在WebStrom来启动这个服务，如图：

启动服务.png

这个时候我们就可以很容易出现以下错误

错误.png

提示 “Packager can’t listen on port 8081” ，说明 8081 端口被占用，这里有两个 解决方案：

方案一： 可以检查是什么程序占用了这个端口并杀掉它

方案二：修改默认8081端口（记得手机设备端口号对应修改）

• 方式一：启动服务前，使用如下命令，改变端口号

  react-native start --port 8083
  

• 方式二：手动修改项目下的node_modules\react-native\local-cli\server\server.js下的方法server.js文件，如下图所示。

修改端口.png

完了过后就可以愉快的启动服务了。

打开IDE中的terminal窗口（切记 不要关闭服务,保持run窗口的数据在跑）
然后，输入命令： react-native run-android 回车安装到手机
这样，通过WebStrom就完成了整个RN程序运行。现在我们就可以开始用代码搞事情了。

搞事情.gif

下面，我都以Android RN程序为例子：
打开index.android.js文件可以修改，然后 react-native run-android重新安装

修改后.png

Load完成后，效果如下：

效果.png

• WebStrom的代码自动提示配置

1.clone ReactNative-LiveTemplate项目到本地
React Native默认不能智能提示代码，github有一个开源的插件：ReactNative-LiveTemplate开源地址。
ReactNative的代码模板,包括:
组件名称
Api 名称
所有StyleSheets属性
Mac中调用ReactNative组件时, 首先 按下 command + J , 然后输入属性名的 首字母 如输入onP 自动提示 onPress, onPressIn, onPressOut, ....

2.添加ReactNative.jar导入到setting

导入setting.png

导入成功后，效果如下：

导入后.png

说明代码智能提示设置导入成功！

2.使用WebStrom+AndroidStudio协作开发

• WebStrom用做服务端，保持服务开启，并且在WebStrom中可以修改js逻辑代码

• AndroidStudio可以用于安装APP，和修改Android App原生代码

1.导入RN项目结构中的android到AS中，等待build成功，如下图

AndroidStudio界面.png

2.现在我们可以run来安装APP可以替代 react-native run-android命令

快速运行.png

三、RN学习推荐

• WebStorm的基本配置：http://blog.csdn.net/gz_jero/article/details/51503374
• RN中文网：http://reactnative.cn/
• React入门教程： https://hulufei.gitbooks.io/react-tutorial/content/introduction.html
• ECMAScript 6 入门 ： http://wiki.jikexueyuan.com/project/es6/style.html
• ReactNative零基础入门到项目实战(蓝鸥免费公开课) ：http://www.jingyingba.com/Home/coursedetails/index/pid/67
• React Native调试技巧与心得：http://blog.csdn.net/quanqinyang/article/details/52215652
• React Native 练习项目Github地址：https://github.com/CarGuo/LearnProject

如果我的文章有帮助到您，请点个赞，您的鼓励将是我写作的最大动力