具有不同类型组件的 React Native 列表视图

Question

我正在开发一个反应原生应用程序。在其主页上，我需要显示一些帖子，例如视频，音频，图像，博客，文章等。我对如何实现这一目标感到困惑.如何使用不同类型的组件，音频，视频，图像的混合制作列表或网格视图。从后端，我们将添加图像，视频，音频或博客，并在列表中创建新帖子。我还想把这个新帖子添加到开头而不是结尾。 任何帮助将不胜感激。

Answer 1

您可以使用FlatList来执行此操作。它非常易于使用，性能也很好，并且由 React-Native 推荐(看看这个(。 这是一个简单的示例，您可以使用FlatList在单独的组件或函数中处理列表项，并将其传递到FlatList的renderItemprop 中。您可以在此处查看FlatList的完整文档：

_keyExtractor = (item, index) => item.id;
_renderItem = ({item}) => (
if (item.type === 'video') {
<MyVideo item={item}/>
} else if (item.type === 'image') {
<MyImage item={item}/>
} else if ...
...
);
render() {
return (
<FlatList
data={dataList}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
);
}