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 (
      <View style={styles.item}>
        <Text style={styles.text}>{data.item}</Text>
      </View>
    );
  }

  /**
   * 下拉刷新
   */
  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 (
      <View style={styles.genIndicatorContainer}>
        <ActivityIndicator
          size={'large'} // 显示大小为 小
          color={'red'} // 颜色
          animating={true} // 显示动画效果
        />
        <Text>正在加载更多</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <FlatList
        data={dataArr} // 数据源
        renderItem={data => _renderDataItem(data)} // 需要渲染的视图
        // 这是组件自带的下拉刷新样式
        // refreshing={isLoading} // 是否刷新，通过一个状态
        // onRefresh={() => {
        //   loadData();
        // }}

        //自定义下拉刷新样式
        refreshControl={
          <RefreshControl
            title={'加载中'} // 显示的文字
            colors={['red']} // Android上的加载颜色
            tintColor={['red']} // IOS 上的加载颜色
            titleColor={'red'} // 显示的文字颜色
            refreshing={isLoading} // 是否刷新，通过一个状态
            onRefresh={() => {
              // 执行刷新的逻辑
              loadData();
            }}
          />
        }
        // 上拉加载
        ListFooterComponent={() => genIndicator()}
        onEndReached={() => {
          refreshData();
        }}
      />
    </View>
  );
}

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',
  },
});