ReactNative 問題收集及解決方案 持續更新中...

一、react-native Image 變量加載本地圖片

以前一直不可以在項目中本地用變量去加載圖片，要麼一張一張的寫，要麼就直接廢了。這兩天好好研究了下，總所周知，在rn下是不容許進行對Image組件中加載進行字符串拼接的

注意：爲了使新的圖片資源機制正常工做，require 中的圖片名字必須是一個靜態字符串（不能使用變量！由於 require 是在編譯時期執行，而非運行時期執行！）。


// 正確
<Image source={require('./my-icon.png')} />;

// 錯誤
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// 正確
var icon = this.props.active
  ? require('./my-icon-active.png')
  : require('./my-icon-inactive.png');
<Image source={icon} />;

請注意：經過這種方式引用的圖片資源包含圖片的尺寸（寬度，高度）信息，若是你須要動態縮放圖片（例如，經過 flex），你可能必須手動在 style 屬性設置{ width: null, height: null }。
複製代碼

二、升級Gradle版本以後打包出現圖片重複問題

昨天我升級android studio 3.0以後，Gradle版本也一樣升級了，可是升級以後打包出現圖片重複問題

這個緣由我在Github上面找了很久，才發現是由於Gradle2.3以後，離線打包的路徑都會在drawable-xxx-v4中，原版的離線路徑在drawable-xxx中，因此致使圖片重複問題，怎麼解決這個問題呢：

修改assetPathUtils.js
assetPathUtils.js文件路徑：\node_modules\react-native\Libraries\Image\assetPathUtils.js
修改：getAndroidAssetSuffix方法

修改前：

function getAndroidAssetSuffix(scale) {
  switch (scale) {
  case 0.75: return 'ldpi';
  case 1: return 'mdpi';
  case 1.5: return 'hdpi';
  case 2: return 'xhdpi';
  case 3: return 'xxhdpi';
  case 4: return 'xxxhdpi';
  }
}

修改後：

function getAndroidAssetSuffix(scale) {
   switch (scale) {
     case 0.75: return 'ldpi-v4';
    case 1: return 'mdpi-v4';
    case 1.5: return 'hdpi-v4';
    case 2: return 'xhdpi-v4';
    case 3: return 'xxhdpi-v4';
    case 4: return 'xxxhdpi-v4';
   }
}


修改完以後 把以前的drawable-xxx文件夾刪掉，而後就能夠正常打包了
drawable-xxx文件路徑：YourProject\android\app\src\main\res
複製代碼

三、【react-native】0.57版本打包錯誤，SDK版本不匹配問題：Execution failed for task 'xxx:verifyReleaseResources'

react-native版本：0.57.1

這個問題本來不是rn版本的問題，緣由是0.57.1將Android SDK的版本更新到27了，這與大多第三方使用了原生代碼的插件不兼容了，由於第三方更新不及時，SDK仍是舊的版本。
複製代碼

錯誤日誌

error: invalid file path 'D:\xxx\node_modules\react-native-version-number\android\build\intermediates\manifests\aapt\release\AndroidManifest.xml'.
 
> Task :react-native-version-number:verifyReleaseResources FAILED
 
FAILURE: Build failed with an exception.
 
* What went wrong:
Execution failed for task ':react-native-version-number:verifyReleaseResources'.
> java.util.concurrent.ExecutionException: java.util.concurrent.ExecutionException: com.android.builder.internal.aapt.v2.Aapt2Exception: AAPT2 error: check logs for details
 
* 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.
 
* Get more help at https://help.gradle.org
 
Deprecated Gradle features were used in this build, making it incompatible with Gradle 5.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/4.10.1/userguide/command_line_interface.html#sec:command_line_warnings
 
BUILD FAILED in 3m 22s
156 actionable tasks: 16 executed, 140 up-to-date
複製代碼

這個是隻有打包apk時纔會出現的錯誤，須要注意兩個地方來肯定你的錯誤和我遇到的是同一類錯誤：

1."verifyReleaseResources"

2."Aapt2Exception

解決方案：

1.首先在node_modules中找到報錯的包裏面的build.gradle，好比我這個就是\node_modules\react-native-version-number\android\build.gradle；

2.修改這個build.gradle，使其與android/build.gradle（也多是android/app/build.gradle）裏面的SDK版本保持一致；

3.將build.gradle裏的compile改成implementation，由於compile已過期

android {
    compileSdkVersion 27 // 23 -> 27
    buildToolsVersion "27.0.3" // 23.0.1 -> 27.0.3
 
    defaultConfig {
        minSdkVersion 16
        targetSdkVersion 26 // 22 -> 26
        versionCode 1
        versionName "1.0"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
    lintOptions {
       warning 'InvalidPackage'
    }
}
 
dependencies {
    implementation 'com.facebook.react:react-native:+' // compile -> implementation
}
複製代碼