RN自定义下拉刷新，轻松搞定下拉交互

2024-01-06 23:52:26

React Native（以下简称 RN）内置的 FlatList 是支持下拉刷新组件的，通过设置 refreshControl 属性即可实现。但是，内置的下拉刷新组件样式和功能都比较简单，无法满足一些特殊需求。因此，本文将介绍如何自定义一个下拉刷新组件，实现更加灵活的下拉刷新功能。

自定义下拉刷新组件

自定义下拉刷新组件，需要实现两个主要功能：

监听下拉手势，并触发刷新事件。
在刷新事件触发后，显示刷新指示器并执行刷新操作。

监听下拉手势

监听下拉手势，可以通过 PanResponder 来实现。PanResponder 是 RN 提供的一个用于处理手势事件的 API。

const panResponder = PanResponder.create({
  onStartShouldSetPanResponder: () => true,
  onPanResponderMove: (evt, gestureState) => {
    if (gestureState.dy > 0) {
      // 手指向上滑动，触发刷新事件
      this.onRefresh();
    }
  },
});

显示刷新指示器并执行刷新操作

显示刷新指示器，可以使用 RN 内置的 ActivityIndicator 组件。执行刷新操作，可以根据具体需求实现。

onRefresh = () => {
  this.setState({ refreshing: true });
  // 执行刷新操作
  setTimeout(() => {
    this.setState({ refreshing: false });
  }, 1000);
};

render() {
  return (
    <FlatList
      refreshControl={
        <RefreshControl
          refreshing={this.state.refreshing}
          onRefresh={this.onRefresh}
        />
      }
    />
  );
}

完整代码

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

const panResponder = PanResponder.create({
  onStartShouldSetPanResponder: () => true,
  onPanResponderMove: (evt, gestureState) => {
    if (gestureState.dy > 0) {
      // 手指向上滑动，触发刷新事件
      this.onRefresh();
    }
  },
});

export default class CustomPullToRefresh extends Component {
  state = {
    refreshing: false,
  };

  onRefresh = () => {
    this.setState({ refreshing: true });
    // 执行刷新操作
    setTimeout(() => {
      this.setState({ refreshing: false });
    }, 1000);
  };

  render() {
    return (
      <FlatList
        {...panResponder.panHandlers}
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this.onRefresh}
          />
        }
      />
    );
  }
}