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

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,
    }
})

- muklah

---

尝试在主容器视图中使用flex将组件分层。 - shubham

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,
    }
})

- Suraj Malviya

---

谢谢，现在它可以工作了。我从容器中删除了高度，但是保留了图片的高度，因为当评论高度时它们会被拉伸。@Suraj Malviya - muklah

在不需要的情况下，您不应该使用cover作为resizeMode选项，对于简单的用例，contain被证明是最好的选择。 - Suraj Malviya

好的，但是当我将其设置为包含图片时，图片不在每个项目的顶部，而是现在在行文本的中心，那么我该如何使其在主题旁边顶端？@Suraj Malviya - muklah

将图像用与图像相同的样式包装在一个视图中，并将图像作为该视图的子元素，使用 flex:1 和 resizeMode: contain。它应该将图像放置在左上角。另外，要使其顶部居中，请在新视图中插入 alignItems: center。 - Suraj Malviya

我像这样设置它 <View style={styles.itemNewsContainer}> <View style={styles.image}> <Image style={{flex: 1}} resizeMode="contain" source={{ uri: urlToImage }} /> </View> <View style={styles.content}> <Text style={styles.title}>{title}</Text> <Text style={styles.description}>{description}</Text> <Text style={styles.publishedAt}>{publishedAt}</Text> </View> </View> 但是它并没有按预期工作。 - muklah

Answer 2

现在是2022年11月。一些人提供的解决方案是正确的，但需要反转。如果您想让您的元素在父级容器内滚动，这是对我有效的方法

const windowHeight = Dimensions.get("window").height;

<View style={{height: windowHeight}}>
...
<ScrollView contentContainerStyle={{flexGrow:1}}>...</ScrollView>
</View>

希望这对正在查看的人有用

- Alex Stolzoff