Question

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

但是如果我把调整大小模式包含在内，我就会得到空格，如果我调整大小模式来拉伸小图像的大小就会失去它的质量

如何调整图像大小以便移除空白区域并使其自身适合

Answer 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作为道具传递，一切都已完成。

Answer 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,
                        }
                    ]}
                />
            );
        }
    }
}

使用它就像使用常规图像一样。如果要使其成为图像背景，则只需传递一个prop isBackgroundImage = {true} 例如：

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

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

2 个答案: