如何在 React Native 中实现滑动刷新？

React Native 提供了 RefreshControl 组件，可以轻松地在滚动视图组件（例如 ScrollView 或 FlatList）中实现滑动刷新功能。

1. 导入相关组件

首先，我们需要导入 ScrollView 或 FlatList 组件以及 RefreshControl 组件。

import { ScrollView, FlatList, RefreshControl } from 'react-native';

2. 创建状态变量

接下来，我们需要创建一个状态变量来表示是否正在进行滑动刷新。

const [refreshing, setRefreshing] = useState(false);

3. 定义刷新函数

我们需要定义一个刷新函数，该函数会在用户下拉刷新时被调用。通常，这个函数会触发一些异步操作，比如从服务器获取最新数据。

const onRefresh = useCallback(() => {
  setRefreshing(true);

  // 执行异步操作
  // ...

  setRefreshing(false);
}, []);

在这个例子中，我们使用了 useCallback 钩子来定义 onRefresh 函数，这是因为函数体中包含了状态变量 refreshing 的更新操作。使用 useCallback 可以确保每次渲染时都返回同一个函数引用，从而避免重复更新状态变量导致的性能问题。

4. 在滚动视图组件中使用 RefreshControl

最后，我们需要在滚动视图组件（ScrollView 或 FlatList）中使用 RefreshControl 组件，并将上面定义的状态变量和刷新函数传递给它。

<FlatList
  data={data}
  renderItem={renderItem}
  refreshControl={
    <RefreshControl
      refreshing={refreshing}
      onRefresh={onRefresh}
    />
  }
/>

在这个例子中，我们使用了 FlatList 组件作为滚动视图组件，并传递了 data 和 renderItem，这些都是用来渲染列表的必要属性。

refreshControl 属性用于指定 RefreshControl 组件，我们将当前的 refreshing 状态和 onRefresh 函数传递给它。

总结

至此，我们已经成功地实现了在 React Native 中使用 RefreshControl 组件实现滑动刷新功能，在用户下拉列表时，可以触发指定的刷新操作。

完整代码示例：

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

const data = [...]; // 列表数据

const renderItem = ({ item }) => (
  <View>
    <Text>{item.title}</Text>
  </View>
);

const App = () => {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);

    // 执行异步操作
    // ...

    setRefreshing(false);
  }, []);

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      refreshControl={
        <RefreshControl
          refreshing={refreshing}
          onRefresh={onRefresh}
        />
      }
    />
  );
};

export default App;

参考资料：

• React Native 官方文档：RefreshControl