TouchableOpacity 内的图像未显示

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 覆盖其容器的整个宽度和高度。可能您的 View 尺寸为 0。

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

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

如果不是；

button: {
   width: 100,
   height: 100
}

或者，

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

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