TouchableOpacity 内的图像未显示答案

【问题标题】：Image inside TouchableOpacity not showingTouchableOpacity 内的图像未显示
【发布时间】：2019-11-04 20:45:00
【问题描述】：

我目前正在尝试在 TouchableOpacity 中设置图像。它没有显示，我坚持为什么会这样。如果您能提供帮助，请告诉我。蒂亚！

我基本上从官方文档中复制了这个：https://facebook.github.io/react-native/docs/touchableopacity，但无济于事。

以为我的 TouchableOpacity 元素可能不是全屏的，但事实并非如此（当我设置背景颜色时，我看到它填满了屏幕）。

<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"
  }
};

我的红色背景填满了整个屏幕，但图像没有。

【问题讨论】：

你能解释一下什么不工作，图片不显示或点击事件不工作吗？
嗨 - 感谢您的回复。图片未显示，但点击事件有效。

标签： image react-native touchableopacity

【解决方案1】：

flex: 1 覆盖其容器的整个宽度和高度。可能您的视图尺寸为 0。

如果你的 touchable 正在显示，试试这个；

imageStyle: {
   width: "100%",
   height: "100%"
}

如果不是；

button: {
   width: 100,
   height: 100
}

或者，

button: {
   width: "100%,
   height: "100%"
}

所以，你可以在尝试这些时了解它们之间的区别

【讨论】：

您好，感谢 Orhan 的回复。您提供的解决方案似乎都不起作用。此外，更改按钮大小似乎也不会影响图像。按钮大小确实发生了变化，但这只会使可点击元素（即 TouchableOpacity）变小，而图像仍然像往常一样偷偷摸摸。
我在snack.expo.io 上尝试了您的代码，它运行良好。你在安卓或ios上试过吗？也许您需要尝试使用 npm start -- --reset-cache 重置缓存。正如我所说，您的代码在我这边运行良好，而且我作为示例编写的代码也适用。
有趣.. 我会重置缓存并回复您。非常感谢！另外，我在ios工作，只通过模拟器尝试过。
所以，我让它以一种奇怪的迂回方式工作。我使用了元素而不是元素，并且不知何故，图像开始显示......困惑并试图理解原因，但我没有抱怨。我会更多地阅读它并尝试使它与一起工作。谢谢！
ui 元素有时会被混淆。很高兴提供帮助:)

【解决方案2】：

父项中的 Flex:1 覆盖整个区域，但图像中的 flex1 仅覆盖整个屏幕的高度。这里宽度变为 0，因为默认情况下 flex 方向是列。尝试为图像设置一些宽度 l，例如 "100%' 0r 任何其他值。

评论后编辑：

如果它不起作用，那么也为 touchableopacity 添加宽度

【讨论】：

感谢 Piyush，您的回复。更改图像宽度似乎不起作用。我尝试过 width: '100%' 和任何其他值 100、200、300 等。
尝试为可触摸的不透明度添加一些宽度。似乎 touchable Opacity 的父级将 flex 设为 1，将 flex direction 设为 coloumn。
还是什么都没有。添加了各种数量，例如之前的 100% 和 100、200、800。即使更改了 TouchableOpacity 和图像标签的宽度，图像仍然没有显示任何内容:(
所以，我让它以一种奇怪的迂回方式工作。我使用了元素而不是元素，并且不知何故，图像开始显示......困惑并试图理解原因，但我没有抱怨。我会更多地阅读它并尝试使它与一起工作。谢谢！