Question

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

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

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
    }
});

我只需要找到一种方法使视图使用适合图像的高度，而不是如上所述的硬编码。

Answer 1

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

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

1 个答案: