React Native: как правильно передать элементы renderItem в FlatList, чтобы их можно было отобразить в другом компоненте?

Question

Чтобы проверить, как работает плоский список, я пытаюсь отобразить в нем элементы, используя другой компонент для функции «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>
    )
} 

А вот мой компонент "на элемент" или "Дорожка":

      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» для текста и иметь еще один плоский список для визуализации всех объектов «media», которые, в свою очередь, будут иметь свойства «title» и «media».

Как я могу этого добиться? Сейчас выдается следующая ошибка:

      "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"

Answer 1

причина ошибки заключается в том, что вы передаете весь объект элемента рендеринга в компонент вместо строки, которую ожидает текст

      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