react-native - 如何在 native react 中设置 View 的自动高度

Question

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