![](/img/trans.png)
[英]react-native: Flatlist how to pass from onViewableItemsChanged to renderItem
[英]React Native: how to properly pass renderItem items to FlatList, so they can be rendered in another component?
為了測試平面列表的工作原理,我嘗試使用“renderItem”function 的另一個組件在其中顯示項目。
這是我呈現 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>
)
}
這是我的組件“每個項目”或“泳道”:
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>
)
}
所以我想要的是讓平面列表顯示 2 個“通道”或項目,它們是“myQueue”和“upcomingQueue”。 每個“通道”將有一個標題和一個媒體數組,其中包含具有“標題”和“圖像”的項目。 因此,在我的“Swimlane”組件中,我想為文本執行“swimlaneItem.title”,並有另一個平面列表來呈現所有“媒體”對象,這些對象又將具有“標題”和“媒體”屬性。
我怎樣才能做到這一點? 現在拋出以下錯誤:
"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"
錯誤的原因是您將整個渲染項 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.