Android之Windows下搭建React Native Android开发环境

Android之Windows下搭建React Native Android开发环境

              穷逼买不起mac,但是他们都说React Native Android只能在mac下面运行，然后到网上各种找资料看能不能在Windows下面搭建开发环境，找了几篇，但是讲得不够详细，没有图片，很虚，然后我用自己的小米手机尝试了下，成功了，不废话，先爆照。

               

第一步、安装jdk

              从 Java官网之JDK下载列表 下载JDK并安装。请注意选择 x86 还是 x64 版本，将JDK的bin目录加入到了系统PATH环境变量，可以通过 Java官网之JDK下载列表 下载JDK。

              设置环境变量PATH：jdk的位置。例如：（PATH => C:\Program Files\Java\jdk1.7.0_60\bin;）安装好了之后，在到控制台去检验下，看是否成功，如下图

              

第二步、下载sdk

              单独安装Android SDK，不翻墙的环境下，为了速度可选择使用 androiddevtools，如果你要翻墙，可以，不需要什么vpn,改hosts, 点我，点我，去下载相应的SDK

              设置环境变量ANDROID_HOME：Android SDK Manager的位置 例如：（PATH => E:\Android\sdk）设置环境变量PATH：例如：（PATH => %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools）

               在这里要注意的地方，一定要配置好，不然到后面会有找不到sdk的错误出现，而且我还要提醒大家，不要为了方便，使用绝对路径放下去，这样还是找不到，我之前就是犯了这个错，还很顽固，不听大神的，给我的教训是别人有经验，应该虚心请教别热，小伙伴，一定要用ANDROID_HOME来配置哦，然后我来测试下有没有环境安装有没有成功，在控制台输入，android,如下图，安装成功的话，会有界面出来，至于什么界面，拭目以待吧，要是没反应的话，那悲催了，没有配置成功呗，继续找原因。 

           

第三步、去官网安装node.js

               如果没有安装node.js，先去官网安装node.js,最好是4.1以上版本，来吧，猛戳这里， 下载node.js,然后去安装，乖乖的去安装了node.js。

第四步、安装react-native命令行工具React-native-cli

               不要告诉我没有git哈，没有的小伙伴去下个git,然后到官网克隆，

[html] view plain copy

print ?

1. git clone https://github.com/facebook/react-native.git    
2. 然后  cd react-native/react-native-cli && npm install -g      

git clone https://github.com/facebook/react-native.git  
然后  cd react-native/react-native-cli && npm install -g    

               我是把react-native放在E盘下面的，如下图操作  

              

              为什么要到官网下下载一个呢？原因是npm在windows下的bug（来源于参考资料）

              初始化项目会报错，如下图

              

               所以直接clone项目主分支master，更安全。

第五步、创建项目

[html] view plain copy

print ?

1. react-native init reactNative  

        react-native init reactNative

              如下图，亲，你要耐心等,不是一下子的事情，我是吃了个饭然后回来才有反应的，听同事说，他等了50分钟才搞好，

                   

             然后我同事出来一个错误，not found git,当我看到这个错误的时候，我的第一直觉告诉我，应该是没有把git的bin文件配置在路径里面，然后我就去找到他电脑git安装目录，然后把它的bin文件配置到path,就像配置jdk，sdk那样，正如所料，解决了。

             

            然后打开我们目录去看下如下图片

             

 第六步、运行package

            在工程目录下运行，如下图，然后就相当于开启了一个服务，这个运行好了，不要关掉它，然后再开启一个控制台。

[html] view plain copy

print ?

1. node node_modules/react-native/packager/packager.js  

node node_modules/react-native/packager/packager.js

                

            

           擦亮你的眼睛，看到了8081没，这条命令会看见程序开启了8081端口，可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本，如下图

              

第七步、run android app

[html] view plain copy

print ?

1. cd reactNative  
2. react-native run-android  

cd reactNative
react-native run-android

         我们在开启一个控制台，然后输入上面的命令，如下图

         

         然后报错了下面的错误，如下图

         

       

        没有build tools revision23.0.1,然后我们去更新吧，我一开始的时候下得很慢，所以就用镜像吧，打开andorid studio -> setting->Android sdk->Launch Standalone SDK Manager ->tools->options 然后输入下图的ip和端口

      

           

          

     然后就慢慢下呗，

     

    

    下好了

    再运行的命令 react-native run-android,尼玛 又报错，如下图

    

     

  安装 Android Support Libraries 和 Android Support Repository，原来是appcompat-v7:23.0.1少了，然后就去下呗，下得我心都碎了，然后我到我同事哪里拷贝了一份，ok，解决了。

   

  

       终于有了，如果同事没有的话还是去sdk manager下面下载，只要你有耐心，就可以了，不管网速怎么样

       

第八步、安装APK

     尼玛，再没搞好没有天理了，build成功，安装上apk后界面红了，如下图，眼睛都红瞎了，红色就像我的心情，搞了这么久，弄了这么久，终于有反应了.

     

     

解决办法

选择菜单：Dev settings

 出现了下面的图片

         选择项：Debug server host for device

         

         

          设置编译环境PC的IP地址，例如：192.168.25.121，你要去控制台 ipconfig，不要傻乎乎的写这个IP地址

         确保手机与编译环境在同一WIFI环境下（IP段相同），packager在运行状态下，然后按返回键或者重启APP就有下面的效果

    

     好了，完美收工，so perfect

第九步、安卓调试

     目前Windows下暂时无法进行调试。

  

   第十步、生成bundle

     进入工程目录，运行以下命令：

     

[html] view plain copy

print ?

1. react-native bundle –platform android –minify  

react-native bundle --platform android --minify

   第十一步、创建keyStore

    如果已经创建过keystore，可以跳过这一步。如果使用命令行创建，可以参考 网上的各种教程。这里介绍使用Android Studio创建的方式。


点击菜单”Build-Generate Signed APK”，点击”Create New”按钮，选择保存的路径，填写密码、Alias、Alias密码、以及证书的详情（Name和Organization至少填一个），最后点击OK保存即可。“`


此时如果继续Generate Signed APK，config选择release，就已经可以生成可以运行的发行包了，不过为了支持持续集成，我们还需要更多工作。

    第十二步、设置keyStore

      在Project窗口中，右键点击app，点击菜单”Open Module Settings”，选择”Signing”标签，按”+”按钮，并填入刚才创建的Keystore和Alias，以及对应的密码。


不要关闭对话框，点击”Build Types”标签，左侧选择release，在右侧的Signing Config中选择刚刚创建的config

 第十三步、解决Lint error

      React Native for Android的依赖库okio不能通过lint检测，因此需要添加例外。


       在项目文件夹/android/app文件夹下创建lint.xml，内容如下：

[html] view plain copy

print ?

1. <?xml version=“1.0” encoding=“UTF-8”?>  
2. <lint>  
3.     <issue id=“InvalidPackage”>  
4.         <ignore regexp=“okio-1.5.0.jar” />  
5.     </issue>  
6. </lint>  

<?xml version="1.0" encoding="UTF-8"?>
<lint>
    <issue id="InvalidPackage">
        <ignore regexp="okio-1.5.0.jar" />
    </issue>
</lint>

     第十四步、打包

        在工程目录下运行

[html] view plain copy

print ?

1. gradlew build  

gradlew build

         即完成打包

      第十五步、总结

        1、大神的意见要听，毕竟别人有经验，虚心听别人的意见，站在巨人的肩膀上

        2、学习了镜像，方便我以后sdk的更新

        3、了解了node.js

        4、熟悉了控制台命令

        5、了解了react-native

        6、学习了keystore

        7、只要有心，定能破釜沉舟。