在 React Native 中根据宽度自动缩放图像高度的组件

在 React Native 中，当您需要为不同的移动设备创建布局时，通常使用相对单位来设置图像的宽度。然而，高度不会自动计算，这可能导致布局问题。

为了确保图像容器的高度保持图像本身的比例，我们可以使用来自 Web 开发的方法。

我们将创建一个容器，在其中以百分比设置 paddingTop 属性。由于 paddingTop 值是相对于设置它的元素的宽度计算的，我们可以使用这种方法。

要计算原始图像的纵横比，我们可以使用以下公式：

const aspectRatio = height / (width / 100);

其中 height 是原始图像的高度，width 是其宽度。

我们将使用 aspectRatio 值来设置容器的 paddingTop。这样，容器将具有与原始图像相同的高宽比，宽度和高度值以百分比指定，使得该容器可以嵌入任何布局中。

要将图像放置在此容器中，我们可以使用以下方法：

<View style={{ position: 'relative', paddingTop: `${aspectRatio}%` }}>
  <View style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 }}>
    <Image source={imageSource} style={{ width: '100%', height: '100%' }} />
  </View>
</View>

这里，aspectRatio 是我们之前计算的值。imageSource 是图像的来源。

这样，图像将自动根据容器的宽度缩放其高度，同时保持其比例。

以下是完整的组件代码：

import React from 'react';
import {Image, ImageProps, ImageResizeMode, StyleSheet, View, ViewProps} from 'react-native';

interface ScaleImageProps {
  /**
   * 如果您不需要图像宽度为百分比和自动高度缩放，
   * 那么您可能需要使用 Image 组件
   */
  containerWidth: `${number}%` | number;
  imageWidth: number;
  imageHeight: number;
  source: ImageProps['source'];
  containerStyle?: ViewProps['style'];
  resizeMode: ImageResizeMode;
}

export const ScaleImage: React.FC<ScaleImageProps> = ({
  containerWidth,
  imageWidth,
  imageHeight,
  source,
  containerStyle,
  resizeMode
}) => {
  const paddingTop: `${number}%` = `${imageHeight / (imageWidth / 100)}%`;

  return (
    <View
      style={[
        {
          width: containerWidth,
          paddingTop,
        },
        containerStyle,
      ]}>
      <View style={styles.wrapper}>
        <Image style={styles.image} resizeMode={resizeMode} source={source} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  wrapper: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  },
  image: {
    width: '100%',
    height: '100%',
  },
});