因此，经过一段时间的思考，我能够在react-native图像中实现高度：自动。您需要知道图像的尺寸才能使此黑客工作。只需在任何图像查看器中打开您的图像，您就会在文件信息中获得图像的尺寸。作为参考，我使用的图像大小为541 x 362

第一次从react-native导入维度

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
}

“resizeMode”不是样式属性。应该像下面的代码一样移动到Image组件的Props。

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')} /> 
...

图像的高度不会自动变，因为样式props中需要Image组件的宽度和高度。因此，您可以使用getSize（）方法计算远程图像，如此答案，也可以计算静态图像的图像比例，如此答案。

有很多有用的开源库——

• 反应-本机-自动-高度-图像
• 反应-本机-全宽-图像
• 反应-原生-适合-图像

如果您知道图像的aspectRatio（宽度/高度），我已经找到了宽度：“100%”，高度：“自动”的解决方案。

这是代码：

import { Image, StyleSheet, View } from 'react-native';

const image = () => (
    <View style={styles.imgContainer}>
        <Image style={styles.image} source={require('assets/images/image.png')} />
    </View>
);

const style = StyleSheet.create({
    imgContainer: {
        flexDirection: 'row'
    },
    image: {
        resizeMode: 'contain',
        flex: 1,
        aspectRatio: 1 // Your aspect ratio
    }
});

这是我在不使用onLayout或Dimension计算的情况下使其工作的最简单方法。如果需要，您甚至可以将其包装在一个简单的可重用组件中。如果有人正在寻找简单的实现，请尝试一下。