react-native 加载了一些图像，其他没有

Question

环境

反应本机 0.60

会发生什么：

我有一个组件，它使用 <ImageBackground> 创建了一种图像按钮。

如果我将应用程序捆绑为 debugRelease 它就像一个魅力，并且显示每个按钮的 all 图像。如果我将应用程序捆绑为 releaseBundle，则缺少 7 张图片中的 4 张（始终是相同的图片）。

我试过的

因此按钮 1 不起作用，按钮 2-4 起作用，而按钮 5-7 甚至不起作用。为了确保图像文件没有损坏，我用新名称复制了按钮 2 的图像，并用这个替换图像 1。图片无论如何都没有显示！

所以我启动了Android Studio，在debug-APK和release-APS中打开apk查看里面的文件。这是结果：

你知道为什么只有一些图像文件没有以正确的方式捆绑到 Release-APK 中吗（即使文件 spenden.jpg 是工作 kontakt.jpg 如上所述的文件)?

这是我实现它的方式：

...

const getHomeButtonList = (data, dropdowns) => [
  {
    id: 'offer',
    bgImage: { uri: 'erwin' },
    btnText: 'ANGEBOTE \n DER SKG',
    navigateTo: 'Offer',
  },
  {
    id: 'contact',
    bgImage: { uri: 'kontakt' },
    btnText: 'KONTAKTE',
    navigateTo: 'Contact',
    data: {
      data,
      dropdowns,
    },
  },
  {
    id: 'videos',
    bgImage: { uri: 'videos' },
    btnText: 'VIDEOS',
    navigateTo: 'VideoList',
  },
  {
    id: 'innovationen',
    bgImage: { uri: 'innovationen' },
    btnText: 'INNOVATION IN MEDIZIN UND \nGESUNDHEITSWESEN',
    navigateTo: 'CategorizedPage',
    data: {
      headerTitle: 'Innovationen',
      headerImage: 'innovationen',
      data: data.innovations,
    },
  },
  {
    id: 'nebenwirkungen',
    bgImage: { uri: 'nebenwirkungen' },
    btnText: 'HILFE BEI NEBENWIRKUNGEN',
    navigateTo: 'CategorizedPage',
    data: {
      headerTitle: 'Nebenwirkungen',
      headerImage: 'nebenwirkungen',
      data: data.sideeffects,
    },
  },
  {
    id: 'beratung',
    bgImage: { uri: 'consultation' },
    btnText: 'BERATUNG UND BEGLEITUNG',
    navigateTo: 'CategorizedPage',
    data: {
      headerTitle: 'Beratung',
      headerImage: 'consultation',
      data: data.advice,
    },
  },
  {
    id: 'spenden',
    bgImage: { uri: 'spenden' },
    btnText: 'SPENDEN',
    navigateTo: 'Browser',
    navigateUrl: url.donateUrl,
  },

];
...

Grid = (props) => {
    const { columns, orientation } = this.state;
    return (
      <FlatList
        data={props}
        key={orientation}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={(orientation === 'portrait') ? [
            styles.btn,
            styles.btnFirst] : [landscape.btn, styles.btnFirst]}
          >
            <TouchableOpacity
              style={[styles.touchBtn, styles[item.id]]}
              onPress={() => this.pressImageButton(item)}
            >
              <ImageBackground
                resizeMode="cover"
                style={styles.imageBackground}
                source={item.bgImage}
              >
                <View style={styles.imageOverlay} />
                <Text style={[styles.btnText]}>
                  {item.btnText}
                </Text>
              </ImageBackground>
            </TouchableOpacity>
          </View>
        )}
        numColumns={columns}
      />
    );
  };

...

        <View style={(orientation === 'portrait')
          ? styles.btnContainer
          : landscape.btnContainer}
        >
          {this.Grid(getHomeButtonList(data, dropdowns))}
        </View>

Answer 1

我发现问题的原因是 build.gradle 中的 shrinkResources true。

ProGuard 没有识别出我需要这些文件。要检查删除了哪些资源，如果您启用了 shrinkResources true，请检查您的 <build-directory>/build/outputs/mapping/release/resources.txt.

就我而言，有如下条目：

Skipped unused resource res/drawable/consultation.jpg: 55893 bytes (replaced with small dummy file of size 0 bytes)
Skipped unused resource res/drawable/angebote.jpg: 71099 bytes (replaced with small dummy file of size 0 bytes)
Skipped unused resource res/drawable/nebenwirkungen.jpg: 57250 bytes (replaced with small dummy file of size 0 bytes)
Skipped unused resource res/drawable/redbox_top_border_background.xml: -1 bytes (replaced with small dummy file of size 104 bytes)
Skipped unused resource res/drawable/signet_sachsen.gif: 1925 bytes (replaced with small dummy file of size 0 bytes)
Skipped unused resource res/drawable/spenden.jpg: 68376 bytes (replaced with small dummy file of size 0 bytes)

如何修复

创建一个名为keep.xml 的文件并将其放在目录/android/app/src/main/res/raw 中。（如果目录 raw 不存在，请创建它。

将其放入文件中：

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools"
           tools:keep="@drawable/spenden,@drawable/angebote" />

重要提示：不要这样写文件类型：@drawable/spenden.jpg。这不会像预期的那样工作。但是您可以像这样对文件名使用通配符：@drawable/img_ 作为通过一个命令 keep 所有图像的小解决方法。

信息来源：

Troubleshooting shringResources

Customize which resources to keep

react-native 加载了一些图像，其他没有

react-native some images are loaded, other not

react-native

imagebackground