4

我目前正在尝试在 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"
  }
};

我得到红色背景来填满整个屏幕，但图像没有。

4

2 回答 2

1

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

评论后编辑：

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

于 2019-06-22T09:06:11.333 回答
1

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

如果你的可触摸显示，试试这个；

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

如果不是；

button: {
   width: 100,
   height: 100
}

或者，

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

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

于 2019-06-22T06:23:59.227 回答