如何调整视图父组件的大小以适合子图像组件

Question

[调整父视图的大小以使其适合其子组件时遇到麻烦，其中一个是Image组件，它将改变其宽度以匹配屏幕宽度，然后高度应该仅仅是保持图像长宽比所必需的。 >

cardContainer是指可容纳多个组件并应调整高度以适合组件的卡。 postMedia是指将填充屏幕宽度但高度未知的图像的样式（是否希望动态地执行此操作以节省纵横比而不会失真或裁剪。mediaContainer是图像的容器，它将根据所需的高度调整大小以适合图像，这是卡内的多个组件之一。

const styles = StyleSheet.create({
    cardContainer: {
        backgroundColor: 'grey',
        width: '100%',
        height: undefined,
        borderTopWidth: 2,
        borderBottomWidth: 2,
        borderTopColor: 'black',
        flex: 0,
        flexShrink: 1
    },
    postMedia: {
        resizeMode: 'contain',
        width: '100%',
        height: undefined
    },
    mediaContainer: {
        backgroundColor: 'green',
        flex: 0,
        flexShrink: 1
    }
});
我曾尝试将子组件设置为flex：1，但这导致视图填充整个我不想要的屏幕。我只希望cardContainer足够大以适合所有内容，而无需拉伸整个屏幕。

仅适用于我正在使用的一张图像的代码如下：

const styles = StyleSheet.create({
    cardContainer: {
        backgroundColor: 'grey',
        width: '100%',
        height: undefined,
        borderTopWidth: 2,
        borderBottomWidth: 2,
        borderTopColor: 'black',
        flex: 0,
        flexShrink: 1
    },
    postMedia: {
        resizeMode: 'contain',
        width: '100%',
        height: 233
    },
    mediaContainer: {
        backgroundColor: 'green',
        flex: 0,
        flexShrink: 1
    }
});
我只需要找到一种方法使视图使用适合图像的高度，而不是如上所述的硬编码。

[调整父视图大小以使其适合子组件时遇到麻烦，其中一个是Image组件，它将改变其宽度以匹配屏幕宽度，然后高度应简单地为...

Answer 1

react-native-scalable-image库解决了我的问题。该库动态查找高度以节省图像的宽高比。