英文:
React Native: how to build a list without a defined item size? (Item size depending on the content inside it)
问题
我正在开发一个类似评论屏幕的功能。正如我们所知,评论的长度不同,通常需要更多或更少的空间来容纳在列表项内。
但显然,在我的FlatList中,我无法想出如何保持项目的大小可伸缩/动态,除非为它们全部提供一个硬编码的高度,请帮忙! 我想知道是否有任何自定义包可以做到这一点,还是我只能对我的列表进行一些技巧。
我的目标的小示范:
附言:我使用FlatList,因为我有一个很长的项目列表,无法对其进行硬编码。
英文:
I am developing a feature similar to a comment screen. As we know, comments have different lengths in which often require bigger or lesser space to contain itself inside a list item.
But apparently, inside my flatlist I am out of ideas to keep the size of the item scalable/dynamic, except for giving them all a hard-coded height, please help! I am wondering if there is any custom package that does this, or I just have to do some tricks to my list.
Little Demo of My Goal:
P.S: I am using a flatlist because I have a long list of item, in which I can't hard code a list.
答案1
得分: 1
你不需要为评论父组件视图定义高度。
import * as React from "react";
import {
Text,
View,
StyleSheet,
FlatList,
Image,
Dimensions,
} from "react-native";
import Constants from "expo-constants";
const comments = [
{
id: 1,
username: "elonmusk",
message:
"If I dig my grave deep enough, maybe it comes out other side of Earth 🌌",
avatar:
"https://pbs.twimg.com/profile_images/1590968738358079488/IY9Gx6Ok.jpg",
},
{
id: 2,
username: "ValaAfshar",
message: "This incredible animation shows how deep humans have dug.",
avatar: "https://pbs.twimg.com/profile_images/1259558245/vala_300dpi.jpg",
},
{
id: 3,
username: "Erdayastronaut",
message:
"In my opinion this is you at your best. Getting super deep into really nerdy aspects of rocket science. No agenda, division or trolling. Just pure rocket science. Now THAT is inspiring and uniting! Let’s get humans to Mars!!!",
avatar:
"https://pbs.twimg.com/profile_images/1253477073265532928/MmGBMWsQ.jpg",
},
];
export default function App() {
const renderItem = ({ item }) => (
<View
style={{
backgroundColor: "white",
borderRadius: 10,
borderWidth: 0.3,
borderColor: "#333",
marginBottom: 5,
padding: 10,
}}
>
<View style={{ flexDirection: "row", paddingVertical: 2 }}>
<Image
source={{ uri: item.avatar }}
style={{ width: 30, height: 30, borderRadius: 30 / 2 }}
/>
<View style={{ paddingHorizontal: 5 }}>
<Text style={{ fontWeight: "700" }}> {item.username} </Text>
<Text style={{ width: Dimensions.get("window").width - (60 + 20) }}>
{item.message}
</Text>
</View>
</View>
</View>
);
return (
<View style={styles.container}>
<FlatList
data={comments}
renderItem={renderItem}
keyExtractor={({ id }) => id.toString()}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
paddingTop: Constants.statusBarHeight,
backgroundColor: "#ecf0f1",
padding: 8,
},
});
演示链接 - https://snack.expo.dev/@emmbyiringiro/eea97f
英文:
You don't need to define height for comment parent component view.
import * as React from "react";
import {
Text,
View,
StyleSheet,
FlatList,
Image,
Dimensions,
} from "react-native";
import Constants from "expo-constants";
const comments = [
{
id: 1,
username: "elonmusk",
message:
"If I dig my grave deep enough, maybe it comes out other side of Earth 🤔",
avatar:
"https://pbs.twimg.com/profile_images/1590968738358079488/IY9Gx6Ok.jpg",
},
{
id: 2,
username: "ValaAfshar",
message: "This incredible animation shows how deep humans have dug.",
avatar: "https://pbs.twimg.com/profile_images/1259558245/vala_300dpi.jpg",
},
{
id: 3,
username: "Erdayastronaut",
message:
"In my opinion this is you at your best. Getting super deep into really nerdy aspects of rocket science. No agenda, division or trolling. Just pure rocket science. Now THAT is inspiring and uniting! Let’s get humans to Mars!!!",
avatar:
"https://pbs.twimg.com/profile_images/1253477073265532928/MmGBMWsQ.jpg",
},
];
export default function App() {
const renderItem = ({ item }) => (
<View
style={{
backgroundColor: "white",
borderRadius: 10,
borderWidth: 0.3,
borderColor: "#333",
marginBottom: 5,
padding: 10,
}}
>
<View style={{ flexDirection: "row", paddingVertical: 2 }}>
<Image
source={{ uri: item.avatar }}
style={{ width: 30, height: 30, borderRadius: 30 / 2 }}
/>
<View style={{ paddingHorizontal: 5 }}>
<Text style={{ fontWeight: "700" }}> {item.username} </Text>
<Text style={{ width: Dimensions.get("window").width - (60 + 20) }}>
{item.message}
</Text>
</View>
</View>
</View>
);
return (
<View style={styles.container}>
<FlatList
data={comments}
renderItem={renderItem}
keyExtractor={({ id }) => id.toString()}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
paddingTop: Constants.statusBarHeight,
backgroundColor: "#ecf0f1",
padding: 8,
},
});
Live Demo - https://snack.expo.dev/@emmbyiringiro/eea97f
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论