react native中一次错误排查 Error:Error: Duplicate resources

最近一直在使用react native中，遇到了很多的坑，同时也学习到了一些移动端的开发经验。

今天在做一个打包的测试时，遇到了一个问题，打包过程中报错“error:error: duplicate resources”，什么意思呢，就是打包资源有重复，后来查看了一下，发现打包到android/app/src目录下的静态文件重名了。

重现步骤：

1：通过vscode打开项目，运行打包命令

react-native ram-bundle --entry-file index.js --platform android --dev false --bundle-output ./android/app/src/main/assets/index.android.bundle --assets-dest ./android/app/src/main/res/

2：

cd android && ./gradlew assemblerelease

 

查看android/app/src/mian/res/drawable目录下静态资源图片文件名重复

 

解决方案

1：打开node_modules/react-native/react.gradle文件，在dofirst块下添加dolast块

dolast {
    def movefunc = { ressuffix ->
        file originaldir = file("$builddir/generated/res/react/release/drawable-${ressuffix}");
        if (originaldir.exists()) {
            file destdir = file("$builddir/../src/main/res/drawable-${ressuffix}");
            ant.move(file: originaldir, tofile: destdir);
        }
    }
    movefunc.curry("ldpi").call()
    movefunc.curry("mdpi").call()
    movefunc.curry("hdpi").call()
    movefunc.curry("xhdpi").call()
    movefunc.curry("xxhdpi").call()
    movefunc.curry("xxxhdpi").call()
}

2：打开node_modules/react-native/local-cli/bundle/assetpathutils.js文件，修改getandroidassetsuffix函数方法如下

function getandroidassetsuffix(scale: number): string {
  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';
  }
  throw new error('no such scale');
}

3：删除android/app/src/main/res/drawable-**目录下面打包进去的静态资源文件(文件名会比较长)

4：如果采用android studio进行打包，点击build下clean project，清除打包缓存

5：重新执行打包命令即可打包成功。

 

参考资料：

1：

2：