4.1零基础学RN-Flatlist初见

·  阅读 324
4.1零基础学RN-Flatlist初见

「这是我参与11月更文挑战的第8天,活动详情查看:2021最后一次更文挑战

之前移动端开发的时候用的是ListView,Android中后面开始用RecyclerView,RecyclerView中默认使用ViewHolder+缓存机制的更新,提供高了列表的效率,没想到在RN中也不推荐使用ListView,那么今天来学习一下ListView中的替代产品FlatList。

1.简介

首先开一下官方的说明:

高性能的简单列表组件,支持下面这些常用的功能:

  • 完全跨平台。
  • 支持水平布局模式。
  • 行组件显示或隐藏时可配置回调事件。
  • 支持单独的头部组件。
  • 支持单独的尾部组件。
  • 支持自定义行间分隔线。
  • 支持下拉刷新。
  • 支持上拉加载。
  • 支持跳转到指定行(ScrollToIndex)。
  • 支持多列布局。

基本包含了我们想用的所有功能,下拉、上拉刷新、header、footer、分割线、空视图的自定义等等,下面来详细看一下。

2.功能使用

2.1简单的示例

使用FlatList需要实现两个基本的属性:data和renderItem,分别代表:数据和item的样式,简单的例子

import React from 'react';
import {FlatList, Text} from 'react-native';

export default App;

function App() {
  const data = [
    {title: '首页', detail: '这是首页详情'},
    {title: '发现', detail: '这是发现详情'},
    {title: '我的', detail: '这是我的详情'},
    {title: '设置', detail: '这是设置详情'},
  ];
  return (
    <FlatList
      data={data}
      renderItem={({item}) => {
        return (
          <Text style={{padding: 10, backgroundColor: 'orange', margin: 10}}>
            {item.title}
          </Text>
        );
      }}
    />
  );
}
复制代码

2.2 复杂一点的示例

import React, {useState} from 'react';
import {FlatList, Text, View} from 'react-native';

export default App;

function App() {

  const mockData = [
    {title: '首页', detail: '这是首页详情'},
    {title: '发现', detail: '这是发现详情'},
    {title: '我的', detail: '这是我的详情'},
    {title: '设置', detail: '这是设置详情'},
  ];

  const [refreshing, setRefreshing] = useState(false);//下拉刷新
  const [listData, setlistData] = useState([]);//列表数据

  //item渲染
  const _renderItem = ({item}) => {
    return (
      <Text style={{padding: 10, backgroundColor: 'orange', margin: 10}}>
        {item.title}
      </Text>
    );
  };

  //空视图
  const _renderEmpty = () => {
    return (
      <View>
        <Text>This is an Empty View</Text>
      </View>
    );
  };

  //加载数据
  const _loadData = () => {
    setlistData([...listData, ...mockData]);
    setRefreshing(false);
  };

  //瀑布流加载更多
  const _onReachEnd = () => {
    console.log('onReachEnd');
  };

  return (
    <FlatList
      data={listData}
      ListEmptyComponent={_renderEmpty}
      refreshing={refreshing}
      onRefresh={_loadData}
      onEndReachedThreshold={0.05}
      onEndReached={_onReachEnd}
      numColumns={2}
      columnWrapperStyle={{padding: 5, borderWidth: 3, borderColor: 'red'}}
      renderItem={_renderItem}
    />
  );
}
复制代码

用了很多次FlatList,但是也是基本使用很多比较详细的内容还是没有使用到,也不是很了解,暂时介绍一部分数据和方法,给自己埋一个坑,以后再来填坑吧。。。。。

3.属性介绍

FlatList控件基于组件封装,继承了其所有props,并包含所有的的属性。

3.1 renderItem(必需)

用于绘制列表中的一项,

  • item:data中需要渲染的项的内容
  • index:当前项位于data中的位置

3.2 data(必需)

数据源,也就是上面例子中的data,目前只支持普通数组。

3.3 ItemSeparatorComponent

行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后

3.4 ListEmptyComponent

列表内容为空时显示的控件,可以直接返回一个渲染好的控件

const _renderEmpty = () => {
  return (
    <View>
      <Text>This is an Empty View</Text>
    </View>
  );
};
复制代码

3.5 ListFooterComponent

底部组件,可以直接返回一个渲染好的控件,跟空视图类似,就不单独写了

3.6 ListHeaderComponent

头部组件,可以直接返回一个渲染好的控件,跟空视图类似,就不单独写了

3.7 columnWrapperStyle

多列模式时(即numColums大于1),可以指定每行的样式

<FlatList
  data={data}
  ListEmptyComponent={_renderEmpty}
  numColumns={2}
  columnWrapperStyle={{padding: 5, borderWidth: 3, borderColor: 'red'}}
  renderItem={({item, index, separators}) => {
    return (
      <Text style={{padding: 10, backgroundColor: 'orange', margin: 10}}>
        {item.title}
      </Text>
    );
  }}
  />
复制代码

3.8 extraData

如果有除data以外的数据用在列表中(不论是用在renderItem还是头部或者尾部组件中),请在此属性中指定。同时此数据在修改时也需要先修改其引用地址(比如先复制到一个新的 Object 或者数组中),然后再修改其值,否则界面很可能不会刷新。

3.9 getItemLayout

如果行高是固定的,可以使用此方法来避免动态计算高度的开销。

getItemLayout={(data, index) => (
  {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}
复制代码

3.10 horizontal

设置为true时,会变为水平布局

3.11 initialNumToRender

指定一开始渲染的元素数量,可以指定只渲染一页的数据,保证加载速度和用户可见内容

3.12 initialScrollIndex

开始时屏幕顶端的元素是列表中的第 initialScrollIndex个元素, 而不是第一个元素

3.13 inverted

翻转滚动方向(boolean)。实质是将 scale 变换设置为-1。

3.14 keyExtractor

此函数用于为给定的 item 生成一个不重复的 key。

3.15 numColumns

多列布局,只能在非水平模式下使用,即必须是horizontal={false}。控件内元素会从左到右从上到下排列。

组件内元素必须是等高的——暂时还无法支持瀑布流布局。

3.16 onEndReached

当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。

结合onEndReachedThreshold实现瀑布流。

3.17 onEndReachedThreshold

决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。

比如,0.5 表示距离内容最底部的距离为当前列表可见长度的一半时触发。

一般用于列表瀑布流更新,当底部不足某个值时,触发加载新数据的操作。

3.18 onRefresh

如果设置了此选项,则会在列表头部添加一个标准的RefreshControl控件,以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。

3.19 refreshing

在等待加载新数据时将此属性设为 true,列表就会显示出一个正在加载的符号。

4.方法介绍

4.1scrollToEnd()

滚动到底部。

4.2scrollToIndex()

将位于指定位置的元素滚动到可视区的指定位置,当viewPosition 为 0 时将它滚动到屏幕顶部,为 1 时将它滚动到屏幕底部,为 0.5 时将它滚动到屏幕中央。

4.3scrollToItem()

滚动至指定的Item,但是会变量列表,效率有影响

4.4scrollToOffset()

滚动到一定的位置

4.5recordInteraction()

主动通知列表发生了一个事件,以便列表重新绘制

4.6flashScrollIndicators()

短暂地显示滚动指示器。

分类:
Android
标签: