【发布时间】：2019-10-24 11:46:39
【问题描述】：
环境
- react-native 0.60
会发生什么：
我有一个组件，它使用<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-native imagebackground