Question

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

我已经从官方文档中复制了以下内容：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"
  }
};

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

Answer 1

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

如果显示可触摸内容，请尝试此操作；

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

如果不是；

button: {
   width: 100,
   height: 100
}

或

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

因此，您可以在尝试使用它们时了解它们之间的区别

Answer 2

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

在评论后编辑：

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

TouchableOpacity内部的图像未显示

2 个答案: