“This is the 8th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021”

Before, ListView was used in the development of mobile terminal, and Then RecyclerView was used in Android. By default, ViewHolder+ cache mechanism was used in RecyclerView to provide high efficiency of lists. However, ListView is not recommended in RN. So today we’re going to look at the alternative product in ListView, FlatList.

1. Introduction

First, the official note:

A high-performance simple list component that supports the following common functions:

  • Fully cross-platform.
  • Horizontal layout mode is supported.
  • The callback event can be configured when the row component is displayed or hidden.
  • Support for separate header components.
  • Support for separate tail components.
  • Supports custom line separators.
  • Supports drop-down refresh.
  • Supports pull-up loading.
  • Supports jumping to a specified row (ScrollToIndex).
  • Supports multi-column layouts.

It basically contains all the features we want to use, such as dropdown, dropup refresh, header, footer, splitter, empty view customization, etc. Let’s take a look at it in more detail.

2. Function usage

2.1 Simple examples

Using FlatList requires the implementation of two basic properties: data and renderItem, representing data and item styles, respectively. Simple example

import React from 'react'; import {FlatList, Text} from 'react-native'; export default App; Function App() {const data = [{title: 'home ', detail:' home '}, {title: 'home ', detail:' home '}, {title: 'my ', detail:' home '}, {title: 'my ', detail:' home '}, {title: 'my ', detail: }, {title: 'this is my detail ', detail:' this is my detail '},]; return ( <FlatList data={data} renderItem={({item}) => { return ( <Text style={{padding: 10, backgroundColor: 'orange', margin: 10}}> {item.title} </Text> ); }} / >); }Copy the code

2.2 A more complex example

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: 'I', the detail: 'this is my details'}, {title:' setting, the detail: 'this is to set up the details'},]; const [refreshing, setRefreshing] = useState(false); // Drop down to refresh const [listData, setlistData] = useState([]); Const _renderItem = ({item}) => {return (< style={{padding: 10, backgroundColor: 'orange', margin: 10}}> {item.title} </Text> ); }; // Empty View const _renderEmpty = () => {return (<View> <Text>This is an Empty View</Text> </View>); }; Const _loadData = () => {setlistData([...listData,...mockData]); setRefreshing(false); }; // Waterfall stream loads more 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} /> ); }Copy the code

I have used FlatList many times, but I still haven’t used many detailed contents, and I don’t know much about them. I will introduce some data and methods for the time being, and bury a hole for myself, and fill the hole later.

3. Attributes

The FlatList control is based on component encapsulation, inheriting all of its props and containing all of its properties.

3.1 renderItem (required)

Used to draw an item in a list,

  • Item: The content of the item in data to render
  • Index: Position of the current item in data

3.2 Data (required)

Data sources, the data in the above example, currently only support plain arrays.

3.3 ItemSeparatorComponent

A dividing line assembly between rows. Does not appear before the first line or after the last line

3.4 ListEmptyComponent

A control that displays when the list content is empty, and can return a rendered control directly

const _renderEmpty = () => {
  return (
    <View>
      <Text>This is an Empty View</Text>
    </View>
  );
};
Copy the code

3.5 ListFooterComponent

The bottom component, which can return a rendered control directly, is similar to an empty view, not written separately

3.6 ListHeaderComponent

The header component, which can return a rendered control directly, is similar to an empty view and is not written separately

3.7 columnWrapperStyle

In multi-column mode (that is, numColums greater than 1), you can specify the style of each row

<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> ); }} / >Copy the code

3.8 extraData

If any data other than Data is used in the list (either in the renderItem or header or tail component), specify it in this property. At the same time, the reference address of the data should be changed first (for example, to copy the data to a new Object or array), and then change its value. Otherwise, the interface may not refresh.

3.9 getItemLayout

If the row height is fixed, you can use this approach to avoid the overhead of calculating the height dynamically.

getItemLayout={(data, index) => (
  {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}
Copy the code

3.10 horizontal

When set to true, the layout changes to horizontal

3.11 initialNumToRender

Specify the number of elements to render initially. You can specify only one page of data to render, ensuring fast loading and user visibility

3.12 initialScrollIndex

The element at the top of the screen is the first initialScrollIndex element in the list, not the first element

3.13 inverted

Reverse scroll direction (Boolean). Essentially, I’m going to set the scale scale to -1.

3.14 keyExtractor

This function is used to generate a non-repeating key for a given item.

3.15 numColumns

Multi-column layouts can only be used in non-horizontal mode, that is, must be horizontal={false}. Elements within the control are arranged from left to right and top to bottom.

Elements within the component must be of equal height — waterfall flow layouts are not yet supported.

3.16 onEndReached

Called when the list is scrolled to a distance below onEndReachedThreshold from the bottom of the content.

Combine onEndReachedThreshold to realize waterfall flow.

3.17 onEndReachedThreshold

Determines how far to get to the bottom of the content to trigger the onEndReached callback. Note that this parameter is a ratio, not a pixel unit.

For example, 0.5 is triggered when the distance from the bottom of the content is half the visible length of the current list.

Typically used for list waterfall updates to trigger the loading of new data when there is not a value at the bottom.

3.18 onRefresh

If this option is set, a standard RefreshControl is added to the head of the list to enable the “drop-down refresh” function. You also need to set the refreshing property correctly.

3.19 refreshing

Set this property to true while waiting for new data to load, and the list displays a symbol being loaded.

4. Method introduction

4.1 scrollToEnd ()

Scroll to the bottom.

4.2 scrollToIndex ()

Scrolls the element at the specified position to the specified position in the visual area, to the top of the screen when viewPosition is 0, to the bottom of the screen when viewPosition is 1, and to the center of the screen when viewPosition is 0.5.

4.3 scrollToItem ()

Scroll to the specified Item, but the variable list will affect efficiency

4.4 scrollToOffset ()

Scroll to a certain position

4.5 recordInteraction ()

Actively notify the list that an event has occurred so that the list can be redrawn

4.6 flashScrollIndicators ()

Briefly displays the scroll indicator.