FlatList -如何检测刷新何时完成？

FlatList是React Native中的一个组件，用于高效地渲染长列表数据。在FlatList中，可以通过设置onRefresh属性来实现下拉刷新功能。当用户下拉列表时，可以通过该属性指定一个回调函数，用于处理刷新操作。

要检测刷新何时完成，可以使用FlatList组件的refreshing属性。该属性用于指定是否正在进行刷新操作。当刷新操作开始时，将refreshing属性设置为true，当刷新操作完成时，将refreshing属性设置为false。

以下是一个示例代码，展示了如何使用FlatList实现下拉刷新，并检测刷新何时完成：

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

const MyComponent = () => {
  const [data, setData] = useState([]);
  const [refreshing, setRefreshing] = useState(false);

  const fetchData = () => {
    // 模拟异步获取数据
    setTimeout(() => {
      const newData = ['Item 1', 'Item 2', 'Item 3'];
      setData(newData);
      setRefreshing(false); // 刷新完成后将refreshing属性设置为false
    }, 2000);
  };

  const handleRefresh = () => {
    setRefreshing(true); // 开始刷新，将refreshing属性设置为true
    fetchData();
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <View>
      <FlatList
        data={data}
        renderItem={({ item }) => <Text>{item}</Text>}
        keyExtractor={(item, index) => index.toString()}
        refreshControl={ // 设置下拉刷新控件
          <RefreshControl
            refreshing={refreshing}
            onRefresh={handleRefresh}
          />
        }
      />
    </View>
  );
};

export default MyComponent;

在上述代码中，首先定义了一个data状态，用于存储列表数据。refreshing状态用于表示是否正在进行刷新操作。fetchData函数模拟了异步获取数据的过程，并在获取数据完成后将refreshing属性设置为false。handleRefresh函数用于处理下拉刷新操作，将refreshing属性设置为true，并调用fetchData函数获取最新数据。

在FlatList组件中，设置了refreshControl属性，将RefreshControl组件作为下拉刷新控件。refreshing属性绑定到RefreshControl的refreshing属性，onRefresh属性绑定到handleRefresh函数，用于处理下拉刷新操作。

通过以上代码，可以实现在FlatList中检测刷新何时完成的功能。