如何获得图像宽度以填充卡片和高度灵活？

Question

我试图设置图像的尺寸，使宽度始终占据卡片的整个宽度（减去水平边距）并具有灵活的高度，以便它可以根据需要进行缩放至。

我该怎么做？似乎风格需要一个高度，它不会接受null。

我尝试了很多使用各种resizeModes，高度，宽度等的组合。

以下是组件：

这是我目前的代码：

 renderImage(image) {
    const { width, height } = Dimensions.get('window');

    if (image) {
      return (
        <View style={styles.imageContainer}>
          <Image
            style={{ width, resizeMode: 'contain', height: 300 }}
            source={{ uri: image }}
          />
        </View>
      );
    }
  }

Answer 1

aspectRatio属性很好地解决了这个问题。

<Image
  style={{ width: '100%', aspectRatio: 1 }}
  source={{uri: 'https://online.picture/dynamic_size'}}/>

Answer 2

我对来自网络的图片（没有确切的宽度和高度已知）和创建react-native-web-image的图像有同样的问题。目前不适用于本地图像，仅适用于远程图像。尝试一下，如果有帮助我会很高兴。

Answer 3

将宽度设置为屏幕宽度，并将高度设置为undefined。