Question

我试图在React-Native上调整图像的大小，并最终做到了。但是我认为我的代码效率低下。图像尺寸在显示后永远不会改变，但是我正在使用一种状态进行渲染。

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

class FitImage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            aspectRatio: 3/2,
        };
    }

    componentDidMount() {
        Image.getSize(http://myImageURL, (width, height) => {
            if (width * 3/2 < height)
                height = width * 3/2;
            this.setState({aspectRatio: width / height});
        });
    }

    render () { 
        return <Image
                    source={{ uri: http://myImageURL }}
                    style={{ width: '100%', height: undefined, aspectRatio: this.state.aspectRatio, resizeMode: 'cover'}}
                />
    }
}

export default FitImage;

为此，我必须渲染两次。我想避免这种情况，所以我尝试通过

const FitImage = props => Image.getSize((http://myImageURL, (width, height) => {... <Image ... />

问题在于它实际上返回了一个Promise，而不是直接返回Image组件。

如何在不使用有状态组件的情况下完成这项工作？

使用不带状态组件的Image.getSzie

0 个答案: