使用 React Native 中的 FlatList 组件显示列表

2020-09-18 08:00:00 · 飞浪

React Native 的 `FlatList` 组件呈现可在屏幕上显示的列表项，并具有滚动、页眉/页脚视图和延迟加载等功能。

简介列表是显示类似类型数据对象的常见可滚动组件之一。列表就像是ScrollView组件的增强版，用于显示数据。React Native 提供了一个FlatList组件来创建列表。FlatList仅渲染可在屏幕上显示的列表项。此外，FlatList还提供许多内置功能，如垂直/水平滚动、页眉/页脚视图、分隔符、下拉刷新、延迟加载等。本指南将解释使用 React Native 中的TheCatsAPI创建和优化猫图像列表的重要细节。

FlatList 基础知识

FlatList 是VirtualizedList组件的专门实现，用于显示当前窗口内可容纳的有限数量的项目。其余项目将通过列表滚动操作进行渲染。FlatList 可以简单地使用 data和renderItem属性来实现，以创建列表。还有许多其他可选属性可用于添加更多功能，因此可以将属性分为主要属性和可选属性。

主要道具

数据采用any类型的项目数组来填充列表中的项目。
renderItem需要一个函数，该函数以数据源中的 item 对象作为输入来构造并返回列表项组件。

可选道具

可选道具用于使用项目分隔符、页眉/页脚、下拉刷新、处理刷新或优化逻辑来装饰 FlatList：

ItemSeparatorComponent用于添加分隔符以在视觉上分隔项目。
keyExtractor用于提供唯一值（ID、电子邮件等），以避免通过跟踪项目的重新排序来重新创建列表。
extraData采用布尔值来重新渲染当前列表。FlatList 是一个PureComponent，它不会根据状态或props对象中的任何变化而重新渲染，因此如果数据数组正在发生变化，则使用extraData prop 来重新渲染当前列表。
为了提高效率， initialNumToRender用于渲染 FlatList 中的最少数量的项目组件。
ListEmptyComponent用于在下载数据时显示一个空视图。
ListHeaderComponent用于添加标题组件，如搜索、菜单项等。
ListFooterComponent用于添加页脚组件，如总项目数、数据摘要等。
getItemLayout返回列表项组件的预定义大小，以跳过运行时的尺寸计算过程，加快渲染过程。
Horizontal prop 采用布尔值来创建水平列表，通过返回类似Horizontal={true}。
numColumns用于创建基于列的列表。
onRefresh和refreshing用于实现下拉刷新控件，并使用布尔标志维护其可见性。
onEndReached和onEndReachedThreshold用于实现给定阈值的延迟加载回调。还有其他 props可用于实现样式、滚动等。

下载列表数据

为了获取模拟响应，请使用TheCatsAPI的搜索请求 API ，它不需要任何注册或 API 密钥。网络请求可以简单地使用获取请求来实现：

      fetchCats() {
  fetch('https://api.thecatapi.com/v1/images/search?limit=10&page=1') // 1
      .then(res => res.json()) // 2
      .then(resJson => {
          this.setState({ data: resJson }); // 3
      }).catch(e => console.log(e));
}
    

上述请求将：

从第一页开始下载限制为十张图片的数据。
将响应转换为 JSON 对象。
使用setState函数将转换后的响应 JSON 对象作为data键的值存储在state对象中。

实现列表项生成器函数

获取请求将向FlatList的主要 props 之一提供数据。现在实现一个函数来为renderItem prop返回一个列表项组件：

      renderItemComponent = (itemData) => // 1
  <TouchableOpacity>   // 2
      <Image style={styles.image} source={{ uri: itemData.item.url }} /> // 3
  </TouchableOpacity>
    

响应中的关键字段是用于下载和显示图像的URL 。以下步骤解释了renderItemComponent函数的工作原理：

将对象作为 UI 组件将使用的参数。
TouchableOpacity组件用于实现点击监听器，因为Image组件没有onPress prop。
图像组件以 URI 作为源数据来显示图像。它将自动下载图像。

实现 FlatList

从react-native模块导入FlatList组件，使用数据和renderItemComponent创建列表：

      render() {
  return (
    <SafeAreaView>
      <FlatList
        data={this.state.data}
        renderItem={item => this.renderItemComponent(item)}
      />
    </SafeAreaView>)
}
    

this.state.data将由fetch请求更新，并触发FlatList组件中的重新渲染过程。上述实现工作正常，但接下来的步骤将添加更多功能以改进FlatList实现。

实现 KeyExtractor

React 始终使用唯一键来跟踪组件中的更新。默认情况下，FlatList会在数据项中查找自定义keyExtractor实现或名为key的字段，否则将使用数组索引作为key的值。id是响应中可用于实现keyExtractor的唯一值：

      render() {
  return (
    <SafeAreaView>
      <FlatList
        data={this.state.data}
        renderItem={item => this.renderItemComponent(item)}
        keyExtractor={item => item.id.toString()}
      />
    </SafeAreaView>)
}
    

实现分隔符

分隔符是放置在列表项之间的组件。可以使用View组件来实现：

      ItemSeprator = () => <View style={{
  height: 2,
  width: "100%",
  backgroundColor: "rgba(0,0,0,0.5)",
}} />

<FlatList
    //...
    ItemSeparatorComponent={this.ItemSeprator}
/>
    

就像ItemSeparatorComponent一样，可以为ListFooterComponent和ListHeaderComponent属性实现不同的组件。

实现下拉刷新

下拉刷新实现需要为刷新prop 提供一个布尔标志来隐藏/显示加载指示。handleRefresh是 onRefresh prop 的一个函数，用于更新数据和加载指示器：

      handleRefresh = () => {
    this.setState({ refreshing: false }, ()=>{this.fetchCats()});
}
<FlatList
    //...
    refreshing={this.state.refreshing}
    onRefresh={this.handleRefresh}
/>)
    

在fetch调用之前将refreshing的值设置为true ，以显示加载指示。如果响应成功或出现错误，则将</

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

使用 React Native 中的 FlatList 组件显示列表

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

fetchCats() { fetch('https://api.thecatapi.com/v1/images/search?limit=10&page=1') // 1 .then(res => res.json()) // 2 .then(resJson => { this.setState({ data: resJson }); // 3 }).catch(e => console.log(e)); }

render() { return ( <SafeAreaView> <FlatList data={this.state.data} renderItem={item => this.renderItemComponent(item)} keyExtractor={item => item.id.toString()} /> </SafeAreaView>) }

handleRefresh = () => { this.setState({ refreshing: false }, ()=>{this.fetchCats()}); } <FlatList //... refreshing={this.state.refreshing} onRefresh={this.handleRefresh} />)