愛之初體驗 ----- React Native

 1. Start Google, 進入 RN 官網 html

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

           

 2. 環境選擇: Linux(Ubuntu Mate) + Androidnode

 3. 環境準備 : Nodejs + Npm + Android SDK  +  watchman (optional) react

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

 

  •    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; 

 

 

  • 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;android

最終的結果以下:ios

 

     

 5. 好了,真的開始RN的部分了:git

  • 首先,安裝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::github

  1. apk 首次編譯會下載gradle完整包,不過,國內禁止,好在這個是能夠配置的:

      

    2. 如上圖,在  ${project.dir} / android / gradle /wrapper / gradle-wrapper.properties 文件中 , distributionUrl 配置了 gradle 的下載路徑,果斷本身離線下載一個,並部署到本地的服務路徑替換,下載瞬間完成奧。。。(此方法一樣適用編譯普通android)npm

    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

相關文章
相關標籤/搜索