爱之初体验 ----- React Native

 1. Start Google, 进入 RN 官网 

  https://facebook.github.io/react-native/docs/getting-started.html​​​​​​

           

 2. 环境选择： Linux(Ubuntu Mate) + Android

 3. 环境准备 ： Nodejs + Npm + Android SDK  +  watchman (optional) 

  https://facebook.github.io/react-native/docs/getting-started.html

 

•    Nodejs
  • Google 进入 https://nodejs.org/en/;
    • 进入nodejs 官网下载 nodejs 的编译版本 ：   node-v4.4.5-linux-x64.tar.xz 
  • 解压缩下载的nodejs 到指定目录 
  • 经过软链接方式来关联 node,npm 命令到 PATH  ;
    •  ln -s  /absolute-path-to-node-dir/bin/node /usr/bin/node; 
    •  ln -s  /absolute-path-to-node-dir/bin/npm  /usr/bin/npm; 

 

• Android Sdk Linux 
  • Google 进入 android sdk 下载地址：
    • https://developer.android.com/studio/index.html；
    • 一样，下载后解压到目录
  • SDK Manager依赖于 Java，所以也须要下载java
    • http://www.oracle.com/technetwork/java/javase/archive-139210.html​​​​​​

 

• Watchman

  • git clone https://github.com/facebook/watchman.git
  • cd watchman
  • sudo ./autogen.sh
  • sudo ./configure make && sudo make install
  • watchman 的编译须要automake ， 所以若有失败请尝试安装依赖 automake： sudo apt-get install automake;
  • watchman 并非必备的，所以也能够不安装。

                                 

    

 4. SDK Manager 下载编译apk须要的库 ，RN 默认使用 android-23 版本进行编译的，因此须要如今23 版本的库，因为不考虑使用virtual device ,所以只是须要下载 对应的 Build-tools, Platform, Google-Library;

最终的结果以下：

 

     

 5. 好了，真的开始RN的部分了：

• 首先，安装rn cli ： (sudo) npm install -g react-native-cli;
• 初始化一个示例项目，此处保持与官网一致，具体能够随意： (sudo) react-native init AwsomeProject; ( 此处时间较长，由于会下载整个android + ios + npm框架)
• 项目初始化完毕，进入该项目 ： cd AwsomeProject;
• 开始build 
• (sudo) react-native run-android 

正常状况下到这步就已经可以在手机上看到了示例的应用了。不过这之间还有不少国内风格的事情，那就是   墙，网络，ERR_NET：：

1. apk 首次编译会下载gradle完整包，不过，国内禁止，好在这个是能够配置的：

      

    2. 如上图，在  ${project.dir} / android / gradle /wrapper / gradle-wrapper.properties 文件中 ， distributionUrl 配置了 gradle 的下载路径，果断本身离线下载一个，并部署到本地的服务路径替换，下载瞬间完成奥。。。（此方法一样适用编译普通android）

    3. 这步过去以后，会一马平川下去，APK也能正常编译出来，但是在将APK传输到手机上的时候有了问题。。。传输失败了，虽然也能够手动上传，可是做为一个完美主义者这并非一个最佳的解决方案，再次 Google，马上找到了一个解决方案

            http://www.hacksparrow.com/react-native-android-unable-to-upload-some-apks.html

        ，为了尊重其余人的成果，请你们能够参照上面的这个路径，另外解决方案也附在下图，

其实，是 gradle 1.3.1 的一个bug，这里没去看有没有新版本发布了，暂时先降级到1.2.3 ，好了此次编译经过，也正常安装到手机上了。

 

6.其余事项

对于首次接触安卓的同窗，下面是些可能遇到的问题

adb devices ; 若是设备不能读出来讲明驱动有问题，这时候就不要考虑是RN的问题了

adb devices; 若是设备列出的属性 是UNAUTHORIZED： 请注意，第一次调试某个手机时候，手机会出现容许 debug 的提示，要在手机上容许后才可以读取手机的信息

为何官网上使用 android-studio ？ 而博主你用的 android-sdk ： 其实android-studio 也是调用了命令行的android-sdk，而依赖，考虑到且在linux上，android-studio 也有好多各类因素，我就选择了比较轻便的sdk。

对于部分手机，首次运行应用可能会出现的白屏：http://blog.csdn.net/itpinpai/article/details/50845625； 请参照这里，主要是须要权限；还有就是设备必须正确配置服务（电脑的ip地址）；

 

7.说了半天，成果图都忘记贴出来了，依然保持官网的原风：

对于首次接触安卓的同窗，下面是些可能遇到的问题

后续各类RN项目我会尽可能抽时间整理出来，但愿你们能喜欢。

7.不得不说的事 

This Article is composed by Samuel Zuuka,  anyone is free to  View , Like  .  And also to Forward ,  Save to local ,  Print , Share to Friends or by  any other spread method ,  with obvious reference to this article or my mail : samuelzuuka@gmail.com ,thank you!

If you do need to use this article without sealing my information ,  please concat me by mail : samuelzuuka@gmail.com 

此博客为 Samuel Zuuka 原创， 任何人可随意  查阅 ，  点赞 , 对于  转发 ， 保存本地  ， 印刷  ， 分享好友  以及其余任何方式  传播行为 ， 须要明显的注明文章出处或者我本人的邮箱地址  samuelzuuka@gmail.com， 谢谢！

如您确实须要不在标注我本人信息的状况下使用此文章，请邮件联系我： samuelzuuka@gmail.com