我最近开始使用react-native,并且遇到了FlatList组件.当使用react时,我总是将map与数组一起使用.

我用的是FlatList,但当我想更改FlatList中的flex-direction项时出现了问题,所以我恢复使用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}
/>

有人能解释为什么一个人应该用FlatListmap,或者反之亦然吗?

推荐答案

FlatList有延迟加载(它只显示屏幕上的内容,所以如果你有一个巨大的列表,它的性能会更好).顺便说一句,如果你需要改变弯曲方向,你可以让它水平-只需通过horizontalprops (相当于说horizontal={true})

React-native相关问答推荐

AWS Amplify处理后端错误

'无法解析模块.安装react-native-pager-view后的实用程序/平台

未执行迁移?

将 Cognito 用户与真实数据库用户联系起来的最佳方式是什么?

元素类型无效:应为字符串

自定义单选按钮在react native 中不起作用

错误发生意外错误:https://registry.yarnpkg.com/react-native-template-react-native-template-typescript:未找到

React js 做通用头部

react native条件渲染

create-react-native-app myproject和react-native init myproject之间的真正区别是什么

react-native: 'adb' 不是内部或外部命令、可运行程序或批处理文件

React Native 无法读取 index.android.delta

React 中的 getSnapshotBeforeUpdate() 是什么?

java.lang.UnsatisfiedLinkError:找不到要加载的 DSO:libfbjni.so 结果:0

使用 Jest 测试 React Native 应用程序

react-native Bottom Up drawer

React-Native Invariant Violation:元素类型无效

React-Native 最低 Android API 级别

如何使用 Jest 测试导入自定义原生模块的 React Native 组件?

加载字体native-base 错误