Question

我有一个React Native应用，可从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,
    }
})

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

1 个答案: