在React Native中自动调整图像组件的大小

Question

我想将Image组件的宽度设置为容器宽度的100%，并根据结果宽度值和图像的纵横比设置高度。

我的容器有一些填充，这意味着 Dimensions.get（'window'）宽度对我来说没有用，因为它没有给我图像宽度设置为 100% 所产生的值。其他方案也无法将维度 API 作为可接受的解决方案。

下面是一个代码示例:

<View
  style={{
    flex: 1,
    paddingHorizontal: 20,
  }}>
  <Image
    style={{
      flex: 1, // Not what I want => just so I can see the image
      width: '100%',
      // height: 'auto', // The behavior that I want
      backgroundColor: 'red',
    }}
    resizeMode={'contain'}
    source={{
      uri: 'https://via.placeholder.com/200x400/000000',
    }}
  />
</View>

结果：

红色背景只是为了显示< code>Image组件。

使用onLayoutprop，我可以获得结果宽度的运行时值，并且借助Image API，我可以计算所需的高度。问题是React Native将首先渲染一个0高度组件，然后onLayout似乎就解决了，这很有意义。

所以

• 有没有办法事先获得像这样的图像组件的宽度值（使用相对宽度声明）？
• 在 React Native 中是否可以自动设置图像高度？如果是这样，如何？

注：在React Native的图像文档中，有一个解释，说明了为什么他们选择默认情况下不自动调整图像组件的大小至少在这种情况下，ParentonLayout在其子级之后解析。

Answer 1

在组件DidMount中，您可以计算图像度量，然后使用该高度和宽度计算aspectRatio。

componentDidMount = () => {
   Image.getSize(YourUri, (width, height) => {
      this.setState({width, height});
    });
}

在您的图像中，您将添加如下样式:

  <Image
    style={{
      width: '100%',
      backgroundColor: 'red',
      aspectRatio: this.state.height !== null ? this.state.width / this.state.height : 1
    }}
    resizeMode={'contain'}
    source={{
      uri: 'https://via.placeholder.com/200x400/000000',
    }}
  />

如 React 原生文档中所述：

纵横比控制节点的未定义维度的大小。纵横比是一个非标准属性，仅在React Native中可用，在CSS中不可用。

-在具有设置的宽度/高度长宽比的节点上控制未设置尺寸的大小

-在设置了伸缩基准纵横比的节点上，控制横轴上节点的大小(如果未设置)

-在具有度量函数长宽比的节点上，度量函数的工作原理就像度量弹性基一样

-在具有挠性增大/收缩长宽比的节点上，如果未设置，则控制十字轴中节点的大小

宽高比考虑了最小/最大尺寸