React-native，如何根据图像的原始大小调整图像大小？答案

【问题标题】：React-native, how to resize the image based on the original size of image?React-native，如何根据图像的原始大小调整图像大小？
【发布时间】：2017-12-04 06:01:31
【问题描述】：

我有要显示的图像列表，其中图像的大小未知，如何完全显示图像而图像顶部和底部没有任何透明空间？（我尝试从 getSize 方法获取图像大小，这最终会在顶部和底部留出很多空间）我希望像这样调整图像大小并适合，

但是如果我设置调整大小模式来包含，我会得到空白，如果我设置调整大小模式来拉伸小图像的大小会失去它的质量

如何调整图像的大小以消除空白并使其适合自己

【问题讨论】：

试试这个包github.com/bamlab/react-native-image-resizer
不，实际上，imageSizer 已经将任何图像设置为指定图像，但我想保持图像纵横比。
你可以找到图片的exif来找到宽度和高度，然后可以相应地设置值
图片的exif是什么？我怎样才能得到它？
我想 exif @SenthilBalaji 表示 image 的 meta-data 。您可以从https://stackoverflow.com/questions/41735846/how-to-get-image-height-and-width-from-uri-on-react-native 获取图像的宽度和高度，然后相应地避免空白。如果你得到它，请发布解决方案。

标签： reactjs react-native react-image

【解决方案1】：

    import React, { Component } from "react";
    import { Dimensions, Image } from "react-native";

    const { width, height } = Dimensions.get("window");

    export default class ResizedImage extends Component {
      constructor(props) {
        super(props);
        this.state = {
          height: 0
        };
      }

      componentDidMount() {
        Image.getSize(
          this.props.source.uri,
          (srcWidth, srcHeight) => {
            const ratio = Math.min(width / srcWidth, height / srcHeight);
            this.setState({ height: srcHeight * ratio });
          },
          error => console.log(error)
        );
      }
      componentWillUnmount() {
        this.setState({ height: 0 });
      }

      render() {
        const { source} = this.props;
        return (
          <Image
            source={{ uri: source.uri }}
            style={{
              width: width * 0.9,
              height: this.state.height
            }}
            resizeMode={"cover"}
          />
        );
      }
    }

您可以将其用作组件并将 URI 作为道具传递，一切都完成了。

【讨论】：

【解决方案2】：

这是我为解决该问题而编写的图像组件。它适用于 Image 和 ImageBackground（带有孩子）。

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

export default class ScalableImageComponent extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const source = resolveAssetSource(this.props.source);
        if (source == null) {
            return null;
        }
        const aspectRatio = source.width / source.height;
        const fixedWidth = this.props.width;
        const fixedHeight = this.props.height;

        const widthCalculated = fixedWidth != null ? fixedWidth : fixedHeight * aspectRatio;
        const heightCalculated = fixedHeight != null ? fixedHeight : fixedWidth / aspectRatio;

        if (this.props.isBackgroundImage) {
            return (
                <ImageBackground
                    source={this.props.source}
                    style={[
                        this.props.style,
                        {
                            width: widthCalculated,
                            height: heightCalculated,
                        }
                    ]}
                >
                    {this.props.children}
                </ImageBackground>
            );
        } else {
            return (
                <Image
                    source={this.props.source}
                    style={[
                        this.props.style,
                        {
                            width: widthCalculated,
                            height: heightCalculated,
                        }
                    ]}
                />
            );
        }
    }
}

就像使用普通图片一样使用它。如果您希望它成为图像背景，只需传递一个道具 isBackgroundImage={true} 例如：

<ScalableImageComponent
    isBackgroundImage={true}
    source={require('./static.png')}
>
<Text>text over image</Text>
</ScalableImageComponent>

【讨论】：