[英]React Native: how to properly pass renderItem items to FlatList, so they can be rendered in another component?
For testing how a flatlist works, I'm trying to display items in it using another component for the "renderItem" function.为了测试平面列表的工作原理,我尝试使用“renderItem”function 的另一个组件在其中显示项目。
Here's my code that renders the FlatList:这是我呈现 FlatList 的代码:
export default function HomeBody() {
const data = [];
let movie1: MediaDetails = {
title: 'Movie1',
image: '../../assets/TestImage.png'
};
let movie2: MediaDetails = {
title: 'Movie1',
image: '../../assets/TestImage.png'
};
let movie3: MediaDetails = {
title: 'Movie1',
image: '../../assets/TestImage.png'
};
let myQueue: SwimlaneItem = {
title: 'My queue',
media: [
movie1,
movie2,
movie3,
]
}
let movie4: MediaDetails = {
title: 'Movie4',
image: '../../assets/TestImage.png'
};
let movie5: MediaDetails = {
title: 'Movie5',
image: '../../assets/TestImage.png'
};
let movie6: MediaDetails = {
title: 'Movie6',
image: '../../assets/TestImage.png'
};
let upcomingQueue: SwimlaneItem = {
title: 'My queue',
media: [
movie4,
movie5,
movie6,
]
}
data.push(myQueue);
data.push(upcomingQueue);
return(
<View style={styles.container}>
<FlatList
style={styles.flatlist}
data={data}
renderItem={({ item }: any) =>
<Swimlane swimlaneItem={item} />
}
/>
</View>
)
}
And here's my component "per item" or "Swimlane":这是我的组件“每个项目”或“泳道”:
export default function Swimlane({ swimlaneItem }: any) {
return (
<View>
<Text>{swimlaneItem}</Text>
{/* <FlatList
horizontal
data={swimLaneItem.media}
renderItem={({ media }: any) =>
<>
<Text>{media.title}</Text>
<Image source={media.image} />
</>
}
/> */}
</View>
)
}
So what I want is for the flatlist to display 2 "lanes" or items, these are "myQueue" and "upcomingQueue".所以我想要的是让平面列表显示 2 个“通道”或项目,它们是“myQueue”和“upcomingQueue”。 Each "lane" will have a title and a media array, containing items which have a "title" and an "image".
每个“通道”将有一个标题和一个媒体数组,其中包含具有“标题”和“图像”的项目。 So in my "Swimlane" component I want to do "swimlaneItem.title" for the text and have another flatlist to render all the "media" objects, which will in turn have a "title" and "media" property.
因此,在我的“Swimlane”组件中,我想为文本执行“swimlaneItem.title”,并有另一个平面列表来呈现所有“媒体”对象,这些对象又将具有“标题”和“媒体”属性。
How can I achieve this?我怎样才能做到这一点? Right now the following error is thrown:
现在抛出以下错误:
"Objects are not valid as a React child (found: object with keys {title, media}). If you meant to render a collection of children, use an array instead"
the reason for the error is that your passing the entire render item object into a component instead of a string which is what Text expects错误的原因是您将整个渲染项 object 传递到组件而不是文本期望的字符串
const RenderItem = ({item}) =>
<View>
<Text>{item.someKEyWhichIsAstring}<Text/>
<Image
style={styles.marker}
source={item.someKeyWhichIsAnValidUrlString}/>
<View/>
```
if you're looking have multiple sections you should use a SectionList
https://reactnative.dev/docs/sectionlist
its inherits from flautist (which inherits from ScrollView) and has and API for multiple sections
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.