React-Native学习笔记（一）

现在React-Native框架很是流行，基本到哪里都会被问到是否有了解过这个框架，今天就来学习一下这个很火的框架。

首先介绍一下所用的开发环境：win10 64位专业版，Android Studio2.3.3，gradle3.3。

由于原来已经安装Android Studio开发环境，所以这里只需要安装React-Native的组件就可以了。

1. 安装node.js，到这里下载安装文件，之后点击安装即可（建议不要安装在默认的C盘下，我是安装在了Android环境的目录下，便于管理），在安装时默认会把node的路径添加到环境变量中。
2. 用git安装react-native命令行工具React-native-cli

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

   然后切换到react-native-cli目录下

   cd react-native/react-native-cli
   npm install -g

   同样建议把React-Native也安装在Android环境的目录。
3. 按理说到这里其实就可以运行demo看看效果了，但如果你直接用现在的环境创建RN项目，你会发现在接下来的init中会一直卡住，这是由于被墙的缘故，所以需要更改一下我们要连接到的registry，打开.\react-native\react-native-cli\package.json文件，在里面添加

   registry = https://registry.npm.taobao.org

   用命令行设置也可以，但windows下并不太好用，所以就直接在文件中添加。这样做的目的是避免连接到国外的registry，影响速度。
4. 以上步骤都完成了之后就可以开始了创建工程了。命令行下切换目录进入到android的workspace，执行

   react-native init project_name

   等命令执行完成（如果重新设置了registry，大概一两分钟就可以完成），成功的话新工程内的目录如下图
   
   用Android Studio打开新创建的android模块，更改gradle和SDK版本问题之后Sync一下，成功后运行，会出现如下界面
   
   这是由于还未启动react-native的服务。解决方法为打开Studio中的终端Terminal，此时是在android模块目录下的，先切换到上一个目录（即project目录。如果不切换，一会执行下面的命令时会报错，还是要切换过来），然后输入命令

   npm install

   
   上面执行完后，输入下面命令开启react-native服务

   react-native start

   
   再次运行，如果Terminal中出现下面的进度
   
   应该就是没什么问题了，运行结果如下
   
   是的，成功了，不需要网上所说的设置devSetting里的IP和端口号了。

如果编译时遇到报错

Error:Execution failed for task ':app:processDebugResources'.
> java.io.IOException: Could not delete path 'E:\Android\work_space_studio\RNTest\android\app\build\generated\source\r\debug\com\facebook\drawee'.

此时drawee文件夹为空，clean一下，重新编译运行，drawee不为空就可以了。编译时的类似问题都可以这么解决。

成功运行后就可以尝试更改App.js文件中的代码，如修改显示字符，字体大小和颜色等，修改之后保存，不需要重新运行app，只需要把app中的页面Reload一下就可以看到修改后的效果（如果是模拟器，Ctrl+M键就可以显示Reload和DevSetting选项了）。