Question

我最近开始使用react-native并遇到了FlatList组件。使用react时，我一直使用map数组。

我正在使用FlatList但是当我想要更改flex-direction中的FlatList项时出现问题，因此我又回到使用map。

以下是使用这两种方法的两个示例：

map

{
    this.state.images.map(image => {
       return (
          <UsersImage key={ image } source={{ uri: image }} />
        )
    })
}

FlatList

<FlatList
    data={ this.state.images }
    renderItem={({item}) => {
        return (
            <UsersImage source={{ uri: item }} />
        )
    }}  
   keyExtractor={(item, index) => index}
/>

任何人都可以解释为什么应该使用FlatList而不是map，反之亦然？

Answer 1

FlatList有延迟加载（它只显示屏幕上的内容，所以如果你有一个巨大的列表，它可以更高效）。顺便说一下，如果您需要更改弯曲方向，可以将其设置为水平 - 只需通过horizontal道具（相当于说horizontal={true}）

Answer 2

无需调整您的 View 标签。只需添加水平

<FlatList
    horizontal
    data={data}
    renderItem={(item) => this.renderItem(item.item)}
    keyExtractor={(item, index) => index}
/>

Answer 3

FlatList只是来自Facebook的一个方便的组件，如果您想使用map，它可以提供您必须手动实现的一些功能。 FlatList有一些非常有用的好函数。我从来没有必要使用地图，因为FlatList通常做得很好。

https://facebook.github.io/react-native/docs/flatlist.html

FlatList vs map react-native

3 个答案: