react-native報錯錦集

下面是一些rn問題的分類:

1.rn的版本問題,如0.55.6版本就是這樣的,安裝的時候就會報錯,
2.link組件的問題,有些時候會發生自動link不全或者路徑錯誤的情況,
3.安卓版本問題,組件的版本和rn項目版本統一
4.其他問題,

其實我建議還是學一下android原生,包括gradle,不然后面涉及太多原生問題很難解決。

1.rn版本問題

rn版本更新的很快,有些版本說實話根本用不了,比如0.55.6,都啟動不了,
我推薦幾個我用過的版本,** 0.55.4 , 0.57.0**。 這兩個相對來說還算穩定。

2.react-native link xxx 問題

link的時候很多時候會出現不全的問題,這也是很多人害怕的問題,尤其一開始做這個項目的時候,項目寫的好好的一link就出錯,網上半天找不到解決方案。其實主要把link這三個地方注意些全就基本沒問題了。以react-native-baidu-map組件為例

  1. android/settings.gradle里面
    rootProject.name = 'apps'
    include ':react-native-baidu-map'
    project(':react-native-baidu-map').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-baidu-map/android');
    include ':app';
  1. android/app/build.gradle里面
dependencies {
    implementation project(':react-native-baidu-map')
}
  1. android/app/src/main/java/../MainApplication.java
@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new BaiduMapPackage(getApplicationContext()),
    );
}

3.android版本問題

這是個大問題,我現在用的androidsdk28的,rn一開始建議的是23,其實這個已經是很老的版本的,很多組件都是在新版本上構建的
如果組件里面的版本大多不統一,那么最好就全部改成最高的版本,android向下兼容一般改成高版本沒什么大問題,
有一個經常遇到的一個語法問題,在link的時候低版本 implementation要改成compile,

dependencies {
    implementation project(':react-native-baidu-map')
}

4.其他問題

其他問題么就不多說了,各種各樣的都有,

接下來就說下其他的報錯案例

  1. Execution failed for task ':app:installDebug'.com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: device '860BDMP22B63' not found
    解決方法: adb reverse tcp:8081 tcp:8081 關閉usb調試再重新打開

  1. 初始化運行紅屏錯誤 unable to load script from asset/index.android.bundle
    assets中沒有成功打包出index.android.bundle文件
    解決方法: 1.去(你的項目文件夾)\android\app\src\main目錄下新建asset文件夾
         2.終端下運行
         react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
    此命令運行不成功把"babel-preset-react-native": "^2.1.0",
    的配置改一下
    再次執行 react-native run-android
      注:由于0.49版本以后的react-native沒有index.android.js和index.ios.js文件,而統一合并成了index.js,所以使用0.49及以后版本的同學請將第2步中的入口文件改為index.js

  1. the development server trturned response error code:500
    解決方法: 刪除node包重新install,要用npm不能用cnpm

4.bundlin failed: error:unable to resolve module 'AccessibilityInfo' form '...node_modules/...react-native-implementation.js':Module' AccessibilityInfo does not exist in the Hast..
解決方法: 這個是0.56的版本問題,換成0.55.4版本就行了


  1. 運行斷開,有時候會出現運行成功了但是又斷開了,直接新運行就好了

  1. 使用AsyncStorage debug不出來數據,也就是本地存儲失效了,需要取消debug模式,這和react-native運行模式有關

  1. Error(1,0) Your project path contains non-ASCII characters,This will most likely cause the
    build to fail on Windows,

    解決方法: 項目不能有中文路徑

  1. 引用react-native-camera保存問題,rn0.55.4版本
    解決問題的地址: git連接

  1. com.android.builder.testing.api.DeviceException:com.android.ddmlib.InstallException:Failed to finalize pession:INSTALL_FAILED_UPDATE_INCOMPATIBLE: Package com.app signatures do not match the prevously installed version:ignoring!
    解決方法: 創建項目名的時候不能重名,就算之前刪除了,除非徹底關閉所有的相關運行程序,還有一中情況是安裝了打包后的app沒有卸載,在運行項目就不行

  1. react-native-baidu-map插件用法
    下載后, 高級版本不支持從 react中直接引入proptype需要改成
import PropTypes from 'prop-types';

把所有react-native-baidu-map里面的js文件都改掉,同時其android/src/main/java/org/lovebing/reactnative/baidumap/BiduMapPackage.java里面注釋掉@Override如果還有問題,就找到BaiduMapViewManager.java 文件,注釋掉里面含public boolean的@Override


  1. 重要一點,開發時候需要用到安卓的debug.keystore的密鑰庫的SHA1密碼來生成百度地圖的key,不然測試的百度地圖一直時網格狀,

項目的包名必須與key申請的包名一致
注意,只有在 .android 目錄下生產的秘鑰簽名才是百度地圖生產key所需要的秘鑰
而不是打包的時候在java jdk目錄下生產的秘鑰

react-native-camera 集成
按照網上配置好集成環境,然后再按照
https://github.com/react-native-community/react-native-camera/issues/1530
文件修改下配置,
最后只能用RNCamera, 不能用Camera組件


  1. a problem occourred evaluating project: 'react-native-fast-image'
    Could not find method implementation() for arguments[com.facebook.react:react-native:+]

    解決辦法: 把node_module下的fast-image里面的compile修改成implementation,高版本的gradle語法變了,

  1. 低版本rn有長屏幕手機撐不開的問題
    cleartext communication to localhost not permitted by network security policy
    ,需要加
<meta-data android:name="android.max_aspect" android:value="2.2"/>

  1. 高版本手機請求不到數據,因為高版本8.0以上手機默認支持https請求,
    解決辦法: 在AndroidManifest.xml文件里面 application下添加android:usesCleartextTraffic="true"

  1. **./gradlew assembleRelease的時候的錯誤
  • What went wrong:
    Execution failed for task ':app:generateReleaseBuildConfig'.

java.nio.file.DirectoryNotEmptyException: D:\work\2018\08-03\water\App\apps\android\app\build\generated\source\buildConfig\release\com

  • Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

BUILD FAILED in 2s
11 actionable tasks: 1 executed, 10 up-to-date**

要重新清理下文件, ./gradlew clean


  1. 調用的百度地圖一直是網格狀,顯示不出來
    這里需要注意這幾個點
  • 1:調試的時候只能用 debug.keystore,
  • 2:正式打包需要用 在./android 目錄下的(一般是在c盤的appdada里面)生成的keystore才行,而不是在java sdk目錄下生成的keystore,這兩個有區別。

  1. **A problem occurred evaluating project ':react-native-file-selector'.

Could not find method google() for arguments [] on repository container.**

解決辦法: gradle-wrapper.properties 里面的distributionUrl = https://services.gradle.org/distributions/gradle-4.1-all.zip


  1. **Execution failed for task ':app:preDebugBuild'.

Android dependency 'com.android.support:support-fragment' has different version for the compile (26.1.0) and runtime (27.1.1) classpath. You should manually set the same version via DependencyResolution**

解決辦法: 我所用的沒有support-fragment這個依賴,所以應該是build沖突,清除build文件,./gradlew clean后就好了


  1. > Task :react-native-fast-image:compileDebugJavaWithJavac
    注: [2] Wrote GeneratedAppGlideModule with: [com.bumptech.glide.integration.okhttp3.OkHttpLibraryGlideModule, com.dylanvann.fastimage.FastImageOkHttpProgressGlideModule]

解決辦法刪了他吧react-native-fast-image ,換個版本吧,最新版本有問題啊,我之前用的5.1.0


  1. 打包的時候可能出現的問題 node_modules_reactnavigation_src_views_assets_backicon.png, but the error uncompiled PNG file passed as argument. Must be compiled first into .flat file.. error: failed parsing overlays.
    在gradle.properties文件中添加以下行:android.enableAapt2 = false,讓他使用舊的aapt方式來獲取資源打包,雖然不推薦,我用的是0.57.0的版本,一開始打包是沒有這個問題的,不知道后面改了android哪里的資源導致的,因為改的東西太多了,沒辦法。我建議還是升級下app版本,把項目移植過去,以免后面繼續出現其他問題。

  1. Exception in thread "main" javax.net.ssl.SSLException: Connection has been shutdown: javax.net.ssl.SSLException: SSL peer shut down incorrectly

網的問題,下載不到distributionUrl=https://services.gradle.org/distributions/gradle-4.10.2-all.zip文件,可以陪下鏡像阿里云

buildscript {
    repositories {
        google()
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public/' }
        jcenter()
    }
}

allprojects {
    repositories {
        mavenLocal()
        google()
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public/' }
        jcenter()
        maven {
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

配置了這個也沒有,翻墻也下載不下來的話去官網下載吧,
gradle地址


  1. Error: Unable to resolve module ./index from \node_modules\react-native\scripts/.: The module ./index could not be found from \node_modules\react-native\scripts/.. Indeed, none of these files exist:
    解決方法: 這個是用了0.59.0-0.59.2版本的問題,換成0.59.4就可以了

  1. Error: null, Cannot fit requested classes in a single dex file (# methods: 71853 > 65536)
    這個是由于android 的64K 引用限制,具體參照原文
    在gradle里面添加multiDexEnabled true 就行了
android {
    defaultConfig {
        ...
        minSdkVersion 21
        targetSdkVersion 28
        multiDexEnabled true
    }
    ...
}

dependencies {
  implementation 'com.android.support:multidex:1.0.3'
}

添加這個后項目高版本手機可以運行了,但是低版本的android就會crash,起都起不來,會報錯主類加載不到。我用到的是4.4.4版本的手機,文檔寫的是android5.0之前的手機不行。然后解決辦法是, 主類繼承MultiDexApplication ,而不是繼承Application類,文檔里面還寫了引用的時候換成android:name="android.support.multidex.MultiDexApplication" ,但是換了后卻是無法使用,所有我這里沒換,是可以使用的;還有問題可以參照連接,仔細看下。


  1. android 底版本沉浸欄不起效
    解決辦法: 正常安裝rn官網的沉浸欄設置,高版本是可以實現沉浸欄的,但是我的測試手機4.4版本不行,沉浸欄還是原來的,需要在 android/app/src/main/res/styles.xml 里面的
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

里面添加

<item name="android:windowTranslucentStatus">true</item>

  1. **Execution failed for task ':app:transformDexArchiveWithExternalLibsDexMergerForDebug'.

com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives:
The number of method references in a .dex file cannot exceed 64K.
Learn how to resolve this issue at https://developer.android.com/tools/building/multidex.html**

這個問題是android引用第三方庫方法超過了64k大小的限制,
解決辦法: 在build.gradle的 defaultConfig里面添加 multiDexEnabled true 設置下就行了,
但是設置后又會出現低版本不兼容的情況,我的是4.4.4版本的android,問題如下


  1. Process: com.socket0594, PID: 27759
    java.lang.RuntimeException: Unable to get provider android.support.v4.content.FileProvider: java.lang.ClassNotFoundException: Didn't find class "android.support.v4.content.FileProvider" on path: DexPathList[[zip file "/mnt/asec/com.socket0594-2/pkg.apk"],nativeLibraryDirectories=[/mnt/asec/com.socket0594-2/lib, /vendor/lib, /system/lib, /data/datalib]]

    這里需要android的support.v4 庫來做兼容,support.v4庫一般rn都引入了沒有引入的這樣引入下
// \android\app\build.gradle
implementation 'com.android.support:support-v4:28.0.0'

然后在 main/java/xxx 目錄下的 MainApplication.java 里面修改MainApplication的繼承類

import android.support.multidex.MultiDexApplication;

public class MainApplication extends MultiDexApplication implements ReactApplication {
    ...
}
// 之前是這樣的
//public class MainApplication extends Application implements ReactApplication {
    //...
// }

27.rn使用StatusBar無效,正常來說不會無效的,我按照其他的的方法設置了

//在 android\app\src\main\res\values\styles.xml 里面
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
       <!-- <item name="android:windowTranslucentStatus">true</item> -->
  </style>  

這個的意思其實是設置沉浸欄的狀態,是否是半透明的,設置了這個windowTranslucentStatus就會導致StatusBar無效,網上的其他人的方法謹慎參考啊

  1. 安裝react-native-image-crop-picker 插件的時候Could not find com.github.yalantis:ucrop:2.2.1-native,因為缺少maven源,
    解決方法:/android/build.gradle 下
allprojects {
    repositories {
        mavenLocal()
        google()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        maven{
            url "https://jitpack.io"
        }
        maven{
            url 'https://maven.google.com/'
            name 'Google'
        }
    }
}

29 skipping devices 'hc70' for 'app"debug' :unkonwn api level
可以先撤銷usb調試,在重新連接usb,
還不行需要把允許未知的app應用安裝開啟,還有usb應用安裝功能打開


  1. could not read path "xx\xx\app\build\intermdiate\xx\xxx"
    如果無法讀取app\build里面的文件,是build的時候出現了沖突,需要進入android文件夾下面清除下build文件
    gradle clean 或者 ./gradlew clean

  1. skipping device '' for 'app:debug': could not find build of variant which supports density -1 and an abi in
    這個問題在網上沒有找到解決方法,然后我就跑了原生run了一次,原生出現了問題 device supports ,but apk only supports x86, 這里是因為為了減小打包體積我設置了下so庫架構
defaultConfig{
  ndk{ "x86","armeabi-v7a"}
}

可以查一下手機的cpu型號,然后根據型號選擇ndk庫,或者這里取消限制,注釋掉,
這里改好后就在as上面起來了,然后又去react-native run-android就沒有一開始的錯誤了。
關于so庫的文章可以看這篇
so庫詳情


32 ** 關于阿里源的配置**
很多時候我們會遇到下載不下來jar包的情況,這時候要看清是哪個jar包下不下來,
比如這個報錯 could not get 'https://jcenter.bintray.com/org/apache/...';
這個 jcenter 是國外的地址下載不到,可以配置下阿里源對應的maven 的jcenter倉庫

buildscript {
    repositories {
        maven {
            url "https://maven.aliyun.com/repository/jcenter"
        }
        google()
        jcenter()
    }
}

allprojects {
    repositories {
        maven {
            url "https://maven.aliyun.com/repository/jcenter"
        }
        google()
        jcenter()
    }
}

其他源同理
阿里源maven倉庫地址

  1. 錯誤:找不到符號, import androidx.annotation.Nullable;
    升級項目到androidx
    在 gradle.properties里面添加
android.useAndroidX=true
android.enableJetifier=true

在gradle里面添加

 implementation 'androidx.annotation:annotation:+'

重新build,如果as沒有自動把項目 android.support.annotation.NonNull 替換成 androidx.annotation.NonNull 手動替換下,在build就可以了
其他地市android.support.xxx 都需要換成androidx的,
個人博客地址

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。