ReactNative 问题收集及解决方案 持续更新中...

1,877 阅读3分钟

1、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 }。

2、升级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

3、【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
}