愛之初體驗 ----- 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