我有一个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,
}
})