如何在本机反应中设置视图的自动高度

Question

我有一个从 api 获取数据的 react 本机应用程序 在这个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,
    }
})