Question

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

仅使用视图我可以实现此目的：

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

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

<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：

似乎没有任何开箱即用的工具，最终最终使用@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

作为最后一个资源，您可以使用Dimensions。

获取每个render的窗口宽度和高度，这样您就可以考虑尺寸的变化（基本上是旋转），并且会匹配每个设备。

你可以像这样使用它：

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

我最终在custom Image component内包装了React Image，它动态计算高度以保持图像比率为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>'}} />

在React Native ScrollView中将图像缩小到设备宽度

3 个答案: