React Native：如何正确地将 renderItem 项传递给 FlatList，以便它们可以在另一个组件中呈现？

Posted 2023-02-16

【中文标题】React Native：如何正确地将 renderItem 项传递给 FlatList，以便它们可以在另一个组件中呈现？

【英文标题】：React Native: how to properly pass renderItem items to FlatList, so they can be rendered in another component?

【发布时间】：2021-07-15 18:18:57

【问题描述】：

为了测试平面列表的工作原理，我正在尝试使用另一个组件来显示其中的项目以实现“renderItem”功能。

这是我呈现 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>
    )
 

这是我的组件“per item”或“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>
    )

所以我想要让平面列表显示 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"

【参考方案1】：

错误的原因是您将整个渲染项对象传递给组件，而不是 Text 期望的字符串

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

【讨论】：

太棒了，谢谢！另外，我会看看SectionList，tyvm！ :-)