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

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

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

Answer 3

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