React Native之FlatList组件(二)

实例使用

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

const dataList = ['武汉', '宜昌', '孝感', '襄阳', '咸宁', '鄂州'];
export default function MyList() {
  // 默认 false 不加载
  const [isLoading, setIsLoading] = useState(false);
  const [dataArr, setDataArr] = useState(dataList);

  /**
   *
   * @param data ( item,index ) 一个就是数组的节点，一个是数组下坐标
   * @returns {JSX.Element}
   * @private
   */
  function _renderDataItem(data) {
    return (
      
        {data.item}
      
    );
  }

  /**
   * 下拉刷新
   */
  function loadData() {
    // 开启刷新状态
    setIsLoading(true);
    const tempData = [];
    setTimeout(() => {
      for (let i = dataArr.length - 1; i >= 0; i--) {
        tempData.push(dataArr[i]);
      }
      setDataArr(tempData.concat(dataArr));
      // 关闭刷新状态
      setIsLoading(false);
    }, 2000);
  }

  /**
   * 上拉加载
   */
  function refreshData() {
    // 开启刷新状态
    setIsLoading(true);
    const tempData = ['河南', '广州'];
    setTimeout(() => {
      setDataArr(dataArr.concat(tempData));
      // 关闭刷新状态
      setIsLoading(false);
    }, 2000);
  }

  /**
   * 上拉加载 样式
   * @returns {JSX.Element}
   */
  function genIndicator() {
    return (
      
        
        正在加载更多
      
    );
  }

  return (
    
       _renderDataItem(data)} // 需要渲染的视图
        // 这是组件自带的下拉刷新样式
        // refreshing={isLoading} // 是否刷新，通过一个状态
        // onRefresh={() => {
        //   loadData();
        // }}

        //自定义下拉刷新样式
        refreshControl={
           {
              // 执行刷新的逻辑
              loadData();
            }}
          />
        }
        // 上拉加载
        ListFooterComponent={() => genIndicator()}
        onEndReached={() => {
          refreshData();
        }}
      />
    
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#e2e2e2',
    flex: 1,
  },
  item: {
    height: 200,
    marginRight: 15,
    marginLeft: 15,
    marginBottom: 15,
    flexDirection: 'column',
    backgroundColor: '#169',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: 'red',
  },
  genIndicatorContainer: {
    alignItems: 'center',
    justifyContent: 'center',
  },
});