如何在 FlatList 中显示不同的内容

Question

我目前遇到了一个我不知道如何正确解决的问题。

我想为我的应用的起始页创建一个提要。提要应无限滚动并尽可能节省资源。 当然，这一切都可以通过 FlatList 组件来完成，但是我不知道如何在 FlatList 中显示不同类型的组件。

这是一张图片，其中包含我对不同类型组件的含义的示例：

Example of complex layout

所以布局必须非常灵活，我不知道如何使用 FlatList 来做到这一点。 我已经考虑过条件渲染，但我再次错过了使其正常工作的方法。

你们中有人解决过这样的问题吗？如有任何建议，我将不胜感激！

Answer 1

您可以创建一个动态返回不同类型内容的组件，例如：

const mock = [
  {
    type: 'feed_1',
    title: 'Lorem',
    feed: [],
  },
  {
    type: 'feed_2',
    title: 'Ipsum',
    feed: [],
  }
]

function App() {
  return (
    <FlatList
      data={mock}
      renderItem={(item) => <Dynamic item={item} />}
    />
  );
}

const Dynamic = memo(({item}) => { 
  switch (item.type) {
    case 'feed_1':
      return <ComponentForFeed1 data={item} />
    case 'feed_2':
      return <ComponentForFeed2 data={item} />

    default:
      return null;
  }
})

您还应该在您的“动态”组件上使用memo 以防止不必要的渲染，不要将上面的代码按字面意思理解，这只是您可以做些什么来动态更改渲染的草稿。

您还可以获取您的部分的相似特征并将它们放在动态组件上，这样您只需更改实际内容。