React Native 集成流水帳

1. 安裝環境: Ubuntu-LTS-12.04
2. http://facebook.github.io/react-native/ React-Native官網。
3. http://facebook.github.io/react-native/docs/getting-started.html 該教程並不是教你如何集成React Native，只是先教你搭建一個React Native的示例嚐嚐鮮。
4. 需要安裝Nodejs和npm(Nodejs的一個包管理下載器)，教程給的不靠譜，ubuntu下會顯示包找不到等問題，建議直接到Nodejs和npm的官方網站進行下載安裝(Nodejs >= 6.0, npm >=3.8.6)。安裝完畢建議替換/usr/bin/下的node和npm的軟鏈接(ubuntu可能預置了老版本的Nodejs)，保證在命令行下調用的是下載的最新的Nodejs和npm(node -v, npm -v)。
5. 配置Android開發環境和環境變量，follow教程即可，留意需要Android 6.0 SDK和Android SDK Build-Tools 23.0.1。
6. Watchman的安裝可選，建議安裝。
7. 先啓動一個Android虛擬機(最好版本>=5.0),實機也可以，不過到時候連起來麻煩。
8. 使用npm安裝react-native-cli: npm install -g react-native-cli, 如果覺得慢的話，可以用淘寶的npm源: https://npm.taobao.org/(裏面有Node.js 鏡像地址)。參考自: http://www.jianshu.com/p/cd2a8c5ee1c7
9. react-native-cli安裝完畢就可以運行 “Testing your React Native Installation ” 這一章的命令了。
10. 隨後在AwesomeProject目錄中運行npm start來運行起develop server，這樣運行起來的app才能取到js bundle。
11. 該例子傳輸的js是index.android.js，可以修改其內容，然後在設備上雙擊”R”鍵來刷新修改後的內容。
12. http://facebook.github.io/react-native/docs/integration-with-existing-apps.html 該教程纔是關於集成React Native到當前項目的。
13. 還是要保證Nodejs npm都安裝就緒。然後按照流程將react native庫下載至Project目錄下
14. 在build.gradle中添加maven本地倉庫時要注意，保證“$rootDir/../node_modules/react-native/android”確實是你下載的react native的目錄，我這裏就修改爲了$rootDir/node_modules/react-native/android，如果你在gradle sync的時候發現在從遠端下載react-native(MavenCentral的是舊版 0.20.0, 而通過npm下載的應該是0.38)，那就說明url對應的目錄不對，在這裏沒有找到之前通過npm下載安裝的最新版React-Native。

15. React-Native要求minSDKVersion=16，這裏遇到一個問題，編譯時報錯:

    .../app/build/intermediates/exploded-   aar/com.android.support/appcompat-v7/23.0.1/res/values-v23/values-v23.xml  
    Error:Error retrieving parent for item: No resource found that matches the given name 'android:TextAppearance.Material.Widget.Button.Inverse'.  
    Error:Error retrieving parent for item: No resource found that matches the given name 'android:Widget.Material.Button.Colored'.
    

    • RootCause應該是React-Native引用了AppCompat-v7/23的內容(分析React Native使用的BUCK文件可以發現)，而當前編譯使用的SDK版本不是23, 導致找不到需要的內容，解決的途徑是將ComplieSDKVersion調整爲23(因爲React-Native需要AppCompat-v7/23，因此不能將採用將23移除的方法)。
    • 上面解決方案的副作用是之前使用apache網絡庫的地方找不到庫，因爲在api 23中，不提供org.apache.http.*(只保留幾個類),解決方法: buildGradle的android{}中添加useLibrary ‘org.apache.http.legacy’。 http://blog.csdn.net/dq1005/article/details/51505017

16. 因爲當前使用的虛擬機碰巧是x86_64，在運行React-Native時會Crash: /data/data/com.hfox.lovesquare/lib-main/libgnustl_shared.so” is 32-bit instead of 64-bit

    • 解決方案:

      1.在項目的根目錄的 gradle.properties 裏面添加一行代碼  android.useDeprecatedNdk=true.
      2.在 build.gradle 文件裏添加以下代碼
      android {
      ...
      defaultConfig {
          ...
          ndk {
              abiFilters "armeabi-v7a", "x86"
          }
      
          packagingOptions {
              exclude "lib/arm64-v8a/librealm-jni.so"
          }
      }
      

      http://blog.csdn.net/ssksuke/article/details/52611689

17. 另外，React-Native增加的方法數有3W+，一般集成後都會突破65536的方法數限制，因此一般會需要開啓multi-dex或者使用插件化方案。

18. 到這一步，基本就集成完畢了，如果要進行簡單測試，可以在project目錄下運行npm start, 教程的示例code(MyReactActivity)就可以從develop server提取index.android.js做展示。