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

无法调整父视图的大小以适应其子组件，其中一个是图像组件，该组件将更改其宽度以匹配屏幕宽度，然后高度应为保留图像纵横比所需的任何值

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

---

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

react native scalable image

库解决了我的问题。库动态查找高度以保留图像的纵横比。

找到了名为

react native scalable image

它通过动态查找高度来保存图像的纵横比，从而解决了我的问题。但仍然很好奇是否有一种方法可以通过默认的React原生样式实现这一点。