如何在React Native中设置视图的自动高度

Question

我有一个反应本机应用程序，该应用程序从此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,
    }
})

Answer 1

跳过为容器指定高度的操作，您将动态获得所需的高度，并且还会从图像中删除高度，以使其占据最终容器高度的高度（根据要渲染的文本）。

您的样式表应如下所示：

const styles = StyleSheet.create({
    container: {
        flexDirection: "row",
        //flex: 1, - remove this as this doesn't make any sense here.
        padding: 10
    },
    content: {
        flexDirection: "column",
        flex: 1,
        paddingLeft: 10, //if you need separation.
    },
    picture: {
        //height: 70, - commenting this will make it automatically ataining height as per your text grows.
        width: 100
    },
    subject: {
        marginLeft: 20,
        fontSize: 16,
        fontWeight: 'bold'
    },
    details: {
        marginLeft: 20,
        fontSize: 16,
    }
})