在 React Native 中保持全宽图像的纵横比

Question

我有一个关于标签的查询。我希望图像采用 alignSelf:stretch 的整个宽度，但我也希望高度根据图像的纵横比。我怎样才能实现这样的目标？

所以我想要一种方法将高度指定为图像宽度的比率。

Answer 1

对于宽高比为 3:2 的水平图像，请使用 style={{ aspectRatio: 3/2 }}。

文档：https://reactnative.dev/docs/layout-props#aspectratio

（适用于 RN 0.40+）

Answer 2

<Image
   source={require('../../assets/img/headers/image-1.jpg')}
   style={styles.responsiveImage}
 />

const styles = StyleSheet.create({

  responsiveImage: {
    width: '100%',
    // Without height undefined it won't work
    height: undefined,
    // figure out your image aspect ratio
    aspectRatio: 135 / 76,
  },

});

Answer 3

我喜欢 bdv 的方法，并且我在我的应用程序中几乎所有地方都使用这种图像。这就是为什么我创建了一个自己的组件，它使用onLayout 来支持设备旋转。

import resolveAssetSource from 'resolveAssetSource';
import React, {Component} from 'react';
import {Image, View} from 'react-native';

export default class FullWidthImage extends Component {
    constructor() {
        super();

        this.state = {
            width: 0,
            height: 0
        };
    }

    _onLayout(event) {
        const containerWidth = event.nativeEvent.layout.width;

        if (this.props.ratio) {
            this.setState({
                width: containerWidth,
                height: containerWidth * this.props.ratio
            });
        } else if (typeof this.props.source === 'number') {
            const source = resolveAssetSource(this.props.source);

            this.setState({
                width: containerWidth,
                height: containerWidth * source.height / source.width
            });
        } else if (typeof this.props.source === 'object') {
            Image.getSize(this.props.source.uri, (width, height) => {
                this.setState({
                    width: containerWidth,
                    height: containerWidth * height / width
                });
            });
        }
    }

    render() {
        return (
            <View onLayout={this._onLayout.bind(this)}>
                <Image
                    source={this.props.source}
                    style={{
                        width: this.state.width,
                        height: this.state.height
                    }} />
            </View>
        );
    }
}

你可以这样使用它：

<FullWidthImage source={{uri: 'http://example.com/image.jpg'}} />
<FullWidthImage source={require('./images/image.jpg')} />

或者如果你知道这样的比率：

<FullWidthImage source={{uri: 'http://example.com/image.jpg'}} ratio={0.5} />
<FullWidthImage source={require('./images/image.jpg')} ratio={0.5} />

Answer 4

其实很简单。

Image 类有一个getSize 方法。 [1]

假设您为aspectRatioImage 创建了一个组件，并且每次componentWillMount 触发时都会计算适当的值。

那么您的代码将如下所示：

componentDidMount() {
    Image.getSize(this.props.source.uri, (srcWidth, srcHeight) => {
      const maxHeight = Dimensions.get('window').height; // or something else
      const maxWidth = Dimensions.get('window').width;

      const ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
      this.setState({ width: srcWidth * ratio, height: srcHeight * ratio });
    }, error => {
      console.log('error:', error);
    });
  }

现在图像的高度和宽度已经保存在组件的状态中，你可以运行

 <Image
   style={{ width: this.state.width, height: this.state.height }}
   source={this.props.source}
   resizeMode="cover"
 />

[1] - https://facebook.github.io/react-native/docs/image.html#getsize

Answer 5

您可以使用react-native-scalable-image。以下示例将完成这项工作：

import React from 'react';
import { Dimensions } from 'react-native';
import Image from 'react-native-scalable-image';

const image = <Image width={Dimensions.get('window').width} source={{uri: '<image uri>'}} />;

Answer 6

您可以根据宽高比计算图像高度。

所以如果图片原本是200x100，在设置resizeMode为stretch后：

var deviceWidth: Dimensions.get('window').width;

...

myImage {
    width: deviceWidth,
    height: deviceWidth * 0.5
}

我知道这可能不是最佳做法，但它对我需要与其他图像保持某种关系等各种尺寸的图像有很大帮助。

Answer 7

通常，执行以下操作会根据方向将图像渲染为最大宽度/高度，同时保持图像本身的纵横比：

render(){
    return(<Image style={{'width': Dimensions.get('window').width, 
                         'height': Dimensions.get('window').height}}
                  resizeMode='contain'
                  source='[URL here]'
           </Image>);
}

使用 'contain' 和 resizeMode：统一缩放图像（保持图像的纵横比），使图像的两个尺寸（宽度和高度）都等于或小于视图的相应尺寸（减去填充） .

更新：* 不幸的是，resizeMode 的“包含”似乎存在一个常见错误，特别是在为 Android 使用 react native 时：https://github.com/facebook/react-native/pull/5738*

Answer 8

在我的情况下，我还必须将高度设置为“自动”：

{
    width: 200,
    height: 'auto',
    aspectRatio: 16 / 9,
}

Answer 9

就我而言，我在我的 React Native (v0.62+) 项目中使用 Styled Components。

我需要为具有已定义 width 和未定义 height 的 Image 组件指定一个正方形 aspectRatio。

我发现样式height:0; 实现了我想要的“方形图像”结果：

// Gallery container styled-component
const Gallery = styled.View`
  flexDirection:row;
  flexWrap:wrap;
`

// Square half-width image styled-component
const Photo = styled.Image`
  width:50%;
  height:0;
  aspectRatio:1;
`

此方法也适用于全宽图像样式 - 将 width:50% 替换为 width:100% 会产生具有正确纵横比的每个图像的预期结果。

Answer 10

const RespImage = ({ offer }) => {

const [height, setHeight] = useState(0);
const [width, setWidth] = useState(0);

    let image_url = `YOUR_IMAGE_URI`;

    Image.getSize(image_url, (srcWidth, srcHeight) => {

        const maxHeight = Dimensions.get('window').height;
        const maxWidth = Dimensions.get('window').width;

        const ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
        setHeight(srcHeight * ratio);
        setWidth(srcWidth * ratio);
    });

    return (
        <View>
            <Image resizeMode={'contain'} style={{ height: height, width: width, marginBottom: 20, resizeMode: "contain" }}
                source={{ uri: image_url }}
            />
        </View>
    )

}

Answer 11

我尝试了 Image.getSize 方法，但遇到了问题，因为我们将所有图像链接收集在一个配置文件中，然后将 ImageURISource 传递给 Image 的 source prop。

我的解决方案是等待 Image onLayout 回调来获取它的布局属性并使用它来更新尺寸。我为此创建了一个组件：

import * as React from 'react';
import { Dimensions, Image, ImageProperties, LayoutChangeEvent, StyleSheet, ViewStyle } from 'react-native';

export interface FullWidthImageState {
  width: number;
  height: number;
  stretched: boolean;
}

export default class FullWidthImage extends React.Component<ImageProperties, FullWidthImageState> {
  constructor(props: ImageProperties) {
    super(props);

    this.state = { width: 100, height: 100, stretched: false };
  }

  render() {
    return <Image {...this.props} style={this.getStyle()} onLayout={this.resizeImage} />;
  }

  private resizeImage = (event: LayoutChangeEvent) => {
    if (!this.state.stretched) {
      const width = Dimensions.get('window').width;
      const height = width * event.nativeEvent.layout.height / event.nativeEvent.layout.width;
      this.setState({ width, height, stretched: true });
    }
  };

  private getStyle = (): ViewStyle => {
    const style = [StyleSheet.flatten(this.props.style)];
    style.push({ width: this.state.width, height: this.state.height });
    return StyleSheet.flatten(style);
  };
}

这将更新图像的尺寸以匹配屏幕的宽度。

Answer 12

使用resizeMode='contain' 和flex=1，我可以在保持纵横比的同时获得完整的图像。

  <Image
     source={{ uri: 'URI' }}
     resizeMode="contain"
     style={{flex:1}} />

图片需要在容器 View 中定义了 flex 或 height ，这样图片的 flex 才能起作用。

Answer 13

使用resizeMode='contain'

<Image style={{height:'100%', width:'100%'}} resizeMode="contain" source={{uri:this.state.imgSource}} />

这将保持原来的纵横比，给定的宽度和高度为 max-height 和 max-width。

Answer 14

你可以这样使用：

<View style={{height:200}} >
<Image source={require('image!MyImage') style={{ resizeMode:Image.resizeMode.ratio, flex:1 }}} />
</View>

请注意，您仍然必须在视图容器上设置高度。