我有一个react native应用程序，它从API中获取数据，在这个api中，每个api都包含新闻主题，图片和细节我有问题，在设置每个项目的高度自动高度我试图设置容器的高度为100，然后主题和细节只是相互重叠，所以我把它设置为300，它'的项目，有长文本，但问题的项目，有短文本，使这些项目之间的空间变得太大，所以我如何设置高度自动，使我每个项目将有高度关于它的内容
这是每个项目的类：

import React, { Component } from "react"
import { View, Image, Text, StyleSheet } from "react-native"

export default class Item extends Component {
    render() {
        let { item } = this.props;
        const { subject, picture, details } = item;
        return (
            <View style={styles.container}>
                <Image style={styles.picture} resizeMode="cover" source={{ uri: picture }} />
                {console.log(image)}

                <View style={styles.content}>
                    <Text style={styles.subject}>{subject}</Text>
                    <Text style={styles.details}>{details}</Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        height: 300,
        flexDirection: "row",
        flex: 1,
        padding: 10
    },
    content: {
        flexDirection: "column",
        flex: 1
    },
    picture: {
        height: 70,
        width: 100
    },
    subject: {
        marginLeft: 20,
        fontSize: 16,
        fontWeight: 'bold'
    },
    details: {
        marginLeft: 20,
        fontSize: 16,
    }
})