如何在 React Native 中将图像宽度设置为 100% 并将高度设置为自动？

Question

我正在尝试在滚动视图中显示图像列表。宽度应为 100%，而高度应自动调整，保持纵横比。

我所做的搜索指出了提供全屏背景样式的各种解决方案。

 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>

我尝试了 width: null、height: null、flex: 1、alignSelf 等的各种组合。上面的解决方案几乎可以工作，除了高度不是动态的。部分图像不可见。

原文由 Prabhakar Bhat 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

所以经过一段时间的思考，我能够在 react-native 图像中实现 height: auto 。您需要知道图像的尺寸才能使此 hack 起作用。只需在任何图像查看器中打开您的图像，您就会在文件信息中获得图像的尺寸。作为参考，我使用的图像尺寸是 541 x 362

首先从 react-native 导入 Dimensions

 import { Dimensions } from 'react-native';

那么你必须得到窗口的尺寸

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

现在计算比率为

const ratio = win.width/541; //541 is actual image width

现在将样式添加到您的图像中

imageStyle: {
    width: win.width,
    height: 362 * ratio, //362 is actual height of image
}

原文由 Vinit Kadam 发布，翻译遵循 CC BY-SA 3.0 许可协议