react-native 在匯入android原生庫容易遇到的問題

在rn開發中,如果遇到了比較特殊的功能,如果沒有現成的輪子的話,通常我們需要去連結原生庫,並且封裝成RN元件提供給js呼叫,作為前端開發者,通常我們對原生端的報錯處理不太懂,在處理和原生功能相關問題時,推薦直接使用android-studio進行開發(專案名->android->app->build.gradle),它可以輔助我們方便的下載第三方庫,並且閃退等問題我們可以在log中檢視的很清晰.

下面列出了我們在連結原生庫中常常遇到的一些問題

1.

這個錯誤常常出現在第一次封裝高版本react-native的library或者引用老版本的庫的時候容易出現,原因是

在安卓中 @Override是複寫父類的方法，而它的父類沒有這個方法，所以不能複寫。

因為你報錯的這個方法在老版本的RN中是存在的，估計這個三方是以前用的老版本，新版本沒有這個方法了，註釋掉就可以了。

這個錯誤也是非常常見的, 這個問題通常發生在你的某個地方缺少了build.gradle檔案或者build.gradle檔案存在問題,如圖所示, 我們可以看到是我們的react-native-citcon庫裡面有問題,這個時候我們可以去檢查下node_module裡面是否有這個庫,build.gradle是否存在

如果你喜歡手動link第三方庫(非react-native link),那麼這個問題你可能會遇到,原因很簡單,引入庫的時候,需要在setting.gradle裡面指明庫的位置,直接編譯是找不到的 如下圖

這個步驟一般引入庫都會有說明

在我們引入原生的aar庫不注意會出現這個問題,我明明都compile寫了啊,路徑也是對的,庫中也指明瞭flatDir路徑,但是為什麼還是報找不到路徑呢?其實在引入aar的時候, 我們需要在project的build.gradle中去指定aar的目錄,如下圖所示

這個問題的改法簡單粗暴, 進入到紅框中的地址,將.lock結尾的檔案幹掉

我們在整合citcon支付到我們專案中,遇到了一個aar的class和原有專案的class衝突情況,看報錯是因為alipay這個class有多個入口,就意味著我們compile了兩個alipay的jar到我們的專案裡,原有專案的jar和引入第三方庫的jar衝突理論上應該是個很常見的情況,官方提供了方法

  implementation(name: '×××××××aar包', ext: 'aar') {
        exclude module: 'gson'
    }
複製程式碼

但是在我們專案中嘗試多種方式過濾不掉, 這時候我們採用第二種方案, 我們將aar解壓,拷貝里面的java檔案出來, 並且採用provided的方式引入alipay,這樣我們在編譯的時候使用最新的alipay 編譯,但是它最終是不會打包到我們的專案裡,我們專案裡面還是使用的以前的alipay,後續若是我們想用aar中的alipay,我們就可以直接將provided改成compiled

    compile "com.facebook.react:react-native:+"
    compile files('libs/volley.jar')
    provided files('libs/alipaySdk-20180403.jar')
    compile files('libs/wechat-sdk-android-without-mta-5.1.6.jar')
複製程式碼

java.io.IOException: Could not delete path 'F:\xxxx\android\app\build\intermediates\transforms\dex\debug\folders\1000'.
複製程式碼

解決：（許可權問題導致）以管理員身份執行控制檯再執行react-native run-android,如果還報錯手動刪除'F:\xxxx\android\app'目錄下的build資料夾。

FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':react-native-device-info:prepareComAndroidSupportAppcompatV72301Library'.
> Could not expand ZIP 'D:\SDK\extras\android\m2repository\com\android\support\appcompat-v7\23.0.1\appcompat-v7-23.0.1.aar'.
複製程式碼

解決：此問題還1類似還是許可權問題 ，手動刪除“F:\xxxxx\node_modules\react-native-device-info\android”目錄下的build資料夾。(注意：以上是以react-native-device-info元件為例，如果是其它元件報類似問題 目錄為: \node_modules\元件名\android )

在windows上經常會遇到刪除資料夾需要管理員許可權,但是給了管理員許可權還是刪不掉,這時候我們可以利用下壓縮工具,壓縮對應的檔案,並且在壓縮時選擇壓縮後刪除原始檔則就可以刪除 or 重啟電腦再刪除

The SDK Build Tools revision (23.0.1) is too low for project ‘:react-native-vector-icons’. Minimum
複製程式碼

這個錯誤在引入第三方庫也會經常遇到,改法也很簡單, 進入對應庫的build.gradle 資料夾 修改buildToolsVersion 為對應版本

注意

在rn中,如果我們只改動了js程式碼,只需要reload,但是隻要我們改動了原生程式碼,包括Manifest以及一些資原始檔,我們都需要重新編譯打包才能生效,如果是新增庫等操作,建議先clear build, 然後再build

終極方法

最後如果你發現你程式碼確實沒問題,路徑等都沒錯,可以嘗試刪除掉android目錄和app目錄下面的build資料夾(打包自動生成檔案), 最後

,再開啟專案

實在還是不行可以嘗試重啟,可能是有埠被佔用的原因