反应本机 – 在React Native中保持全幅图像的宽高比

发布时间：2020-12-15 20:51:50 所属栏目：百科来源：网络整理

导读：我有关于标签的查询.我想要一个图像来使用我使用alignSelf做的父的整个宽度：stretch,但是我也想要根据图像的宽高比来设置高度.我该如何实现这样的事情？所以我想要一种方式来指定高度是图像宽度的比例. 我喜欢bdv的方法,我几乎在我的应用程序中使用这种图

我有关于标签的查询.我想要一个图像来使用我使用alignSelf做的父的整个宽度：stretch,但是我也想要根据图像的宽高比来设置高度.我该如何实现这样的事情？

所以我想要一种方式来指定高度是图像宽度的比例.

我喜欢bdv的方法,我几乎在我的应用程序中使用这种图像.这就是为什么我创建了一个使用onLayout来支持设备旋转的自己的组件.

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

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

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

        Image.getSize(this.props.source,(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'}} />

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!