将图像缩放到React Native ScrollView中的设备宽度

Question

我有一个图像，我想成为设备屏幕的全宽度。

仅使用视图，我就可以实现这一点：

<View style={{flex:1}}>
     <Image resizeMode="contain" style={{flex: 1, height: undefined, width: undefined}} source={this.props.images.infoImage} />
</View>

将其更改为滚动视图会导致图像完全停止渲染：

<ScrollView style={{flex:1}}>
     <Image resizeMode="contain" style={{flex: 1, height: undefined, width: undefined}} source={this.props.images.infoImage} />
</ScrollView>

我发现，如果我设置了图像的高度，它将呈现...但是我希望图像动态响应设备的大小。

如何在不声明明确高度的情况下解决此问题？

Answer 1

根据 @Martinarroyo的评论，我将contentContainerStyle={{flex:1}}添加到scrollview，就像：

：

<ScrollView contentContainerStyle={{flex:1}}>
    <Image resizeMode="contain" style={{flex: 1, width: undefined, height: undefined}} source={this.props.images.infoImage} />
</ScrollView

这完全解决了我的问题。图像是显示的完整宽度，同时保持正确的长宽比。

编辑：显示出图像框架的高度保持不变，但图像缩小了。这意味着它的顶部和底部都有大块的填充物。截至目前，我不知道如何删除它。

编辑2：

似乎没有任何工具开箱即用RN，最终最终使用了@Ihor Burlachenko的修改版本的解决方案。我创建了一个自定义组件，该组件采用所需的宽度/高度约束，并根据其缩放。我需要将其用于本地文件，而 Image.getSize()方法不起作用，因此我修改了Ihor的解决方案，以通过将其传递到包含宽度和高度的尺寸对象中。

import React from 'react';
import { Image } from 'react-native';
export default class ScalableImage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            width: null,
            height: null,
        }
    }
    componentDidMount() {
        if(typeof this.props.source === 'string') {
            Image.getSize(this.props.source, this._calculateImageDimensions, console.log);
        } else if(this.props.dimensions) {
            this._calculateImageDimensions(this.props.dimensions.width, this.props.dimensions.height)
        }
    }
    render() {
        return (
            <Image
                { ...this.props }
                style={[
                    this.props.style,
                    { width: this.state.width, height: this.state.height }
                ]}
            />
        );
    }
    _calculateImageDimensions(width, height) {
        let ratio;
        if (this.props.width && this.props.height) {
            ratio = Math.min(this.props.width / width, this.props.height / height);
        }
        else if (this.props.width) {
            ratio = this.props.width / width;
        }
        else if (this.props.height) {
            ratio = this.props.height / height;
        }
        this.setState({ width: width * ratio, height: height * ratio });
    }
}
ScalableImage.propTypes = {
    width: React.PropTypes.number,
    height: React.PropTypes.number,
    dimensions: React.PropTypes.object
};

我然后将其使用：

<ScalableImage source={require('../path/to/local/image.png')} 
               width={Dimensions.get('window').width()} 
               dimensions={{width: 700, height: 400}} />

Answer 2

作为最后资源，您可以使用尺寸。

在每个render上获取Windows的宽度和高度，这样您就可以考虑大小的变化（基本上是旋转）并将与每个设备匹配。

您可以这样使用：

import {Dimensions} from 'react-native'+
// Then, in your component:
render(){
    const {width, height} = Dimensions.get('window'):
    return (<ScrollView style={{flex:1}}>
     <Image resizeMode="contain" style={{flex: 1, height, width}} source={this.props.images.infoImage} />
</ScrollView>)
}

Answer 3

我最终在自定义图像组件中包装了反应图像，该图像组件在onComponentDidMount中动态计算高度以保持图像比率：

Image.getSize(this.props.source.uri, (width, height) => {
    let ratio;
    if (this.props.width && this.props.height) {
        ratio = Math.min(this.props.width / width, this.props.height / height);
    }
    else if (this.props.width) {
        ratio = this.props.width / width;
    }
    else if (this.props.height) {
        ratio = this.props.height / height;
    }
    this.setState({ width: width * ratio, height: height * ratio });
}, console.log);

然后我这样使用：

<Image width={Dimensions.get('window').width} source={{uri: '<image uri>'}} />