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

【问题标题】：How can I get the image width to fill the card and the height to be flexible?如何获得图像宽度以填充卡片和高度灵活？
【发布时间】：2017-01-30 14:24:40
【问题描述】：

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

我该怎么做？好像样式需要高度，不接受null。

我已经尝试了很多使用各种 resizeMode、高度、宽度等的组合。

这是组件：

这是我当前的代码：

 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>
      );
    }
  }

【问题讨论】：

标签： react-native react-native-flexbox

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

恐怕我做不到。我正在使用不支持本机模块的指数。
在这种情况下，我可以建议使用两步逻辑：拳头Image.getSize (facebook.github.io/react-native/docs/image.html#getsize) 检索原始尺寸，然后您可以计算所有需要的尺寸以正确缩放。

【解决方案3】：

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

【讨论】：

样式需要高度，不接受空或遗漏。如果我这样做，图像根本不会渲染。
imageContainer是什么风格的？
就这个：marginHorizontal: 10, marginBottom: 5,