时间戳

首页 > 解决方案 > react-native 加载了一些图像，其他没有

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

问题描述

环境

发生什么了：

我有一个组件，它使用<ImageBackground>.

如果我将应用程序捆绑为debugRelease，它就像一个魅力，并且显示每个按钮的所有图像。如果我将应用程序捆绑为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>

标签： react-nativeimagebackground

解决方案

我发现问题的原因shrinkResources true在build.gradle.

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_作为一种解决方法，可以通过一个命令保留所有图像。

信息来源：

shringResources 疑难解答

自定义要保留的资源

推荐阅读