如何设置图像宽度为100％，高度为自动反应原生？ [英] How to set image width to be 100% and height to be auto in react native?

问题描述

我正在尝试在滚动视图中显示图像列表。宽度应该是100％，而高度应该是自动的，保持宽高比。

I am trying to display list of images in a scrollview. Width should be 100%, while height should be automatic, keeping aspect ratio.

我做的搜索指向了提供全屏背景风格的各种解决方案。

The searches I did pointed to various solutions which give fullscreen background style.

const styles = StyleSheet.create({
    image: {
        width: null,
        height: 300,
        resizeMode: 'cover'
    }
});

<ScrollView style={{flex: 1}}>
    <Image style={styles.image} source={require('../../../images/collection-imag1.png')}/>
    <Image style={styles.image} source={require('../../../images/collection-imag2.png')}/>
</ScrollView>

我尝试过各种宽度组合：null，height：null，flex：1，alignSelf等。除了高度不动态之外，上述解决方案几乎正常工作。部分图像不可见。

I have tried various combinations of width: null, height: null, flex: 1, alignSelf etc. The above solution is almost working, except the height is not dynamic. Parts of the image are not visible.

推荐答案

resizeMode isn风格属性。应移至图像组件的道具，如下面的代码。

"resizeMode" isn't style property. Should move to Image component's Props like below code.

const win = Dimensions.get('window');

const styles = StyleSheet.create({
    image: {
        flex: 1,
        alignSelf: 'stretch',
        width: win.width,
        height: win.height,
    }
});

...
    <Image 
       style={styles.image}
       resizeMode={'contain'}   /* <= changed  */
       source={require('../../../images/collection-imag2.png')} /> 
...

这篇关于如何设置图像宽度为100％，高度为自动反应原生？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！