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

Question

我目前被一个问题困住了，不知道如何正确解决。

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

这是一张图片，其中包含我如何理解不同类型组件的示例：

Example of complex layout

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

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

Answer 1

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

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 以防止不必要的渲染，不要将上面的代码当成文字，它只是您可以动态更改渲染的草稿。

你也可以得到你的版块的相似特征，然后把它们放在动态组件上，这样你只需要改变实际的内容。

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

How to display different content in a FlatList

javascript

reactjs

react-native

react-native-flatlist