windows下面的ReactNative环境搭建以及挖坑

前言：

         ReactNative更新很快，它在windows上面的环境搭建有点小麻烦，我也是一步步踩坑走过来。下面文章未必是所有的坑，只是我遇见的一些问题的总结。本教程只是教大家如何使用真机调试（不包括模拟器），因为本人的笔记本太烂了，打开模拟器会很卡，所以没用模拟器。

正文：

1、准备安装AndroidStudio（包括它的SDK），然后将下载好的sdk配置到环境变量，如果是Android工程师就跳过这一步，AS下载及安装教程。

      配置环境变量（ANDROID_HOME 和platform-tools的环境变量，你可以用ANDROID_HOME 去配置platform-tools，我这里就没这么做了）

      在cmd中输入 adb devices  可以看到连接的手机和模拟器

2、安装node.js

      node.js下载及安装教程

3、下载安装Git，同时也要记得配置环境变量

      下载git并安装

4、安装react-native的命令行工具

     以前都是直接全局安装react-native，但是这个占用内存很大，后来就将react-native中的命令行单独抽出安装，也就是react-native-cli。

      同样打开cmd ，输入 npm  install -g react-native-cli   

      记得要加上-g，这个就是全局安装的意思，如果不加只会装在本地，命令会找不到。

     查看你装的react-native-cli版本

    

       查看react-native总共有哪些版本以及最新的版本， 输入 npm info react-native

      

       如果你想安装制定版本的react-native的话，可以使用@符号

       npm install react-native-cli@版本号

     

5、创建react-native项目

       假如你想在F:\reactNative下面创建一个react-native项目，项目的名称为myrn，那么可以在F:\reactNative这个目录下打开cmd输入命令react-native init myrn

                 

       但是问题来了，初始化的时候你会一直卡在哪里，我试了很多遍，每次都会卡在哪里，我就会Ctrl+c 去结束任务，然后重新执行命令反复了很多次都不行，那怎么办呢，其实可以使用淘宝镜像去下载，init卡死解决方案。

     到node安装目录下面找到npmrc在文件末尾加上egistry = https://registry.npm.taobao.org这句话就可以了。
      F:\node\node_modules\npm\npmrc

      然后再执行react-native init myrn 命令就可以了

 6、运行reactNative服务器 

       进入项目根目录（myrn的根目录），输入react-native start命令

   

         服务端口默认是8081

    

       如果你的8081端口被专用就会报异常，这个时候你就可以重新制定端口，在cmd中输入命令 

       react-native start --port 9999

 

7、运行安卓项目

     链接手机，在cmd中输入adb devices确保手机链接（最好是Android5.0以上）

     进入项目根目录（myrn的根目录）另起一个cmd（不要在服务的cmd中输入此命令），输入react-native run-android命令

     

      初次运行 react-native run-android 指令的时候 会出现gradle下载极慢，一直在卡中。那么为什么会卡呢，因为它在下载gradle-2.4-all.jar这个包，如果你不翻墙的话会很慢。其实我们可以自己从网上下载gradle-2.4-all这个包放入C:\Users\yw\.gradle\wrapper\dists\gradle-2.4-all这个文件夹下面。当然你也可以不用gradle-2.4-all.jar这个包，也可以用其它的包，比如我就用了gradle-3.5-all.jar这个包。如果用这个包就要修改相应的配置。

        如果一直等待它自己下载完成的话要很久的时间而且还可能下载不完全导致报错（下面的错误就是这个gradle包下载不完全导致无法解压，遇到这个错误就要把这个gradle包删除重新下载）。

        运行的时候我们发现了错误，无法推送app到我们的设备上面，看白色框的信息，此信息告诉我们可以配置ANDROID_HOME或者添加一个local.properties文件解决这个问题。如果你配置了ANDROID_HOME就应该不会再有这个问题，如果你不想配置ANDROID_HOME了，你也可以从AndroidStudio项目中复制一份local.properties文件放在F:\reactNative\myrn\android目录下（项目myrn下面的android目录下面）。

       复制一份local.properties放在F:\reactNative\myrn\android目录下（项目myrn下面的android目录下面）

       在这个文件中添加自己sdk的路径

9、打开悬浮窗权限、配置手机地址和端口

     向手机安装APP的时候出现了错误，这个错误告诉我们我们的IP地址和端口号设置不对，那么我们配置相关IP地址和端口号。

     

       a、先要把笔记本的网络和手机的网络处于同一个WiFi局域网下。

       b、打开手机悬浮窗权限（这里只演示魅族手机）

             魅族手机--->设置--->应用管理--->myrn(安装的应用)--->权限管理--->悬浮窗权限

       c、打开myrn（安装的应用），摇晃手机弹出窗口Dev Settings--->Debug server host&port for device--->              设置IP地址和端口（默认端口地址是8081）

       

        

          d、配置完成后点击rReload,就会看到Welcome to React Native！界面

10、配置webstom

       a、打开用webstom导入项目（myrn），打开后会报错，点击switch切换成JSX语言，或者在Settings设置                JSX语言。

      

    

              b、配置react-native start快捷命令（其实是npm start命令）

      

   

      这样点击npm按钮就可以开启服务了

c、配置代码智能提醒，下载ReactNative.jar，配置file-->import settings-->ReactNative.jar

 

11、AndroidStudio配置

         AS不需要什么配置，只需import，不过import时候注意目录，是在ReactNative项目根目录的android目录下，否则Android Studio无法编译调试。执行react-native start开启服务，用AS运行项目。

如果出现下面与服务链接不成功的的错误，可能是没有开启服务的原因，也可能是IP地址和端口号配置错误。

         

         如果你打开了AS，并且希望通过执行react-native run-android运行app，那么可能会报错，这个时候只要用AS软件clean一下就行了。