TouchableOpacity内部图像未显示

Question

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

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

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，因为默认情况下flex方向是列。尝试为图像ike“100%”或任何其他值设置一些宽度。

在评论后编辑：

如果它不工作，那么添加宽度到触摸不透明度也