React Native开发待办事项应用如何将ScrollView替换为FlatList

替换实现代码 #

你可以直接将原有ScrollView相关代码替换为如下FlatList实现：

<FlatList
  width={width - 20}
  data={Object.values(tasks)}
  keyExtractor={item => item.id}
  renderItem={({ item }) => (
    <Task 
      item={item} 
      deleteTask={_deleteTask} 
      toggleTask={_toggleTask} 
      updateTask={_updateTask}
    />
  )}
/>

改动说明 #

• 不用手动遍历tasks数组做渲染，FlatList的data属性直接传入要渲染的列表数据源即可，长列表场景下性能远优于ScrollView，只会渲染可视区域内的节点，不会一次性加载全部元素
• keyExtractor属性对应原来map语法里的key，用来给每个列表项生成唯一标识，逻辑和原实现完全一致
• renderItem是每个列表项的渲染回调，解构拿到单个item之后直接传递给Task组件即可，原有的三个事件函数deleteTask/toggleTask/updateTask不需要做任何修改

如果后续需要扩展列表功能，还可以直接使用FlatList自带的下拉刷新、上拉加载、列表为空时的占位组件、列表项分隔线等能力，不需要自己额外封装逻辑。

内容的提问来源于stack exchange，提问作者scsc