TouchableOpacity内部的图像未显示 [英] Image inside TouchableOpacity not showing

问题描述

我目前正在尝试在TouchableOpacity中设置图像.它没有显示，我一直坚持为什么.如果您可以提供帮助，请告诉我.TIA！

I'm currently trying to set up an image inside TouchableOpacity. It isn't showing and I'm stuck on why that is. Please let me know if you can help. TIA!

我基本上复制了以下内容: https://facebook.github.io/来自官方文档的react-native/docs/touchableopacity ，但无济于事.

I've basically copied this: https://facebook.github.io/react-native/docs/touchableopacity from the official docs, but to no avail.

也许我的TouchableOpacity元素不是全屏显示，但事实并非如此(当我设置背景色时，我看到它充满了屏幕).

Thought maybe my TouchableOpacity element wasn't full screen but that's not the case (when I set the background color, I see it fill the screen).

<TouchableOpacity style={styles.button} onPress={this.onWaitingButtonPress.bind(this)}>
    <Image style={styles.imagestyle} source={{uri: "https://www.dollargeneral.com/media/catalog/product/cache/image/e9c3970ab036de70892d86c6d221abfe/0/0/00870101.jpg"}}/>
</TouchableOpacity>

const styles = {
  button: {
    flex: 1,
    alignItems: "stretch",
    backgroundColor: "red"
  },
  imageStyle: {
    flex: 1,
    resizeMode: "contain"
  }
};

我得到红色背景填充整个屏幕，但是图像却没有.

I get the red background to fill the whole screen, but the image does not.

推荐答案

父级中的Flex:1覆盖整个区域，而图像中的flex1仅覆盖整个屏幕的高度.由于默认情况下伸缩方向为列，因此宽度变为0.尝试将图像的宽度l设置为"100％"，将其他值设置为0r.

Flex:1 in parent covers entire area but flex1 in image cover only height of entire screen. Here width becomes 0 since flex direction is column by default. Try setting some width lfor image ike "100%' 0r any other value.

在评论后

如果它不起作用，则还要在touchableopacity中添加宽度

If it doesn't not work then add width to touchableopacity also

这篇关于TouchableOpacity内部的图像未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！