React-native, как изменить размер изображения в зависимости от исходного размера изображения?

Question

У меня есть список изображений для отображения, где размер изображения неизвестен, как я могу отобразить изображение полностью без каких-либо прозрачных пробелов в верхней и нижней части изображения? (Я попытался получить размер изображения с помощью метода getSize, который в конечном итоге дает много места сверху и снизу). Я хотел, чтобы изображение было изменено и подогнано таким образом,

Но я получаю пробелы, если я помещаю режим изменения размера, чтобы содержать, и если я помещаю режим изменения размера, чтобы растянуть размер маленького изображения, теряет его качество

Как я могу изменить размер изображения так, чтобы белые пробелы были удалены, и подгонять себя

Answer 1

Это компонент изображения, который я написал для решения этой проблемы. Работает как с 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>

Answer 2

    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 как реквизит, и все будет сделано.