React Native - 如何在水平可滚动列表中模拟 RefreshControl

Question

问题

我正在开发一个水平可滚动列表，每次滑动时它总是滚动整个屏幕（即一个“页面”）。当它位于第一页并且用户再次向右拉动时，我需要刷新整个列表。

对于垂直视图，如果用户在视图位于最顶部位置时向下拉，则会出现ScrollView标准。RefreshControl但对于横版来说，并没有标准的解决方案。

我的实验

这个想法

我尝试添加一个PanResponder来捕捉感人和感动的事件。请注意，我VirtualizedList在我的应用程序中使用了 a 。基本逻辑是：

• 我创建一个隐藏的View（其宽度默认设置为 0）ActivityIndicator，其中包含一个，并将此视图作为 插入ListHeaderComponent到VirtualizedList
• 我监听 的VirtualizedList事件onScroll并不断保存最新的滚动位置
• 当滚动位置接近 0 并且用户向右拉动（通过事件捕获手势PanResponder）时，我使用 ActivityIndi​​cator 对隐藏视图的宽度进行动画处理以模拟 RefreshControl 行为

结果

但是，PanResponder无法正确捕获所需的事件。大多数时候，当我在开始处向右拉动时VirtualizedList（在 Android 设备上），只会出现标准的击中边缘动画（出现渐变蓝色层）。

通过添加一些日志，我发现onPanResponderGrant偶尔会触发，但onPanResponderMove、onPanResponderRelease、onPanResponderTerminate或 都onPanResponderTerminationRequest不会被触发。

触发时onPanResponderGrant，隐藏ActivityIndicator偶尔会部分出现。“向右拉”效果只会很快出现，并且总是立即停止，只出现隐藏视图的非常狭窄的部分。

我猜底层ScrollView窃取了事件并阻止我的代码响应。但即使我设置onPanResponderTerminationRequest总是返回false仍然无济于事。即使我直接用VirtualizedLista 替换ScrollView也会产生相同的结果。

有谁知道当 ScrollView 滚动超出顶部时如何正确捕获触摸和移动事件？或者是否有另一种可行的方法来实现水平版本的 a RefreshControl？

实验代码

import React from 'react'
import {
  Text, View, ActivityIndicator, ScrollView, VirtualizedList,
  Dimensions, PanResponder, Animated, Easing
} from 'react-native'


let DATA = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];

class Test extends React.PureComponent {

  constructor(props) {
    super(props);

    this.state = {
      refreshIndicatorWidth: new Animated.Value(0),
    };

    this.onScroll = evt => this._scrollPos = evt.nativeEvent.contentOffset.x;
    this.onPullToRefresh = dist => Animated.timing(this.state.refreshIndicatorWidth, {
      toValue: dist,
      duration: 0,
      easing: Easing.linear,
    }).start();
    this.resetRefreshStatus = () => {
      Animated.timing(this.state.refreshIndicatorWidth, {
        toValue: 0,
      }).start();
    };

    const shouldRespondPan = ({dx, dy}) => (this._scrollPos||0) < 50 && dx > 10 && Math.abs(dx) > Math.abs(dy);
    this._panResponder = PanResponder.create({
      onMoveShouldSetPanResponder: (evt, gestureState) => {
        return shouldRespondPan(gestureState)
      },
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => {
        return shouldRespondPan(gestureState)
      },
      onPanResponderGrant: (evt, gestureState) => {
        console.warn('----pull-Grant: ' + JSON.stringify(gestureState));
      },
      onPanResponderMove: (evt, gestureState) => {
        console.warn('----pull-Move: ' + JSON.stringify(gestureState));
        this.onPullToRefresh(gestureState.dx)
      },
      onPanResponderTerminationRequest: () => {
        console.warn('----pull-TerminationRequest: ' + JSON.stringify(gestureState));
        return false
      },
      onPanResponderRelease: (evt, gestureState) => {
        console.warn('----pull-Release: ' + JSON.stringify(gestureState));
        this.props.refreshMoodList();
      },
      onPanResponderTerminate: () => {
        console.warn('----pull-Terminate: ' + JSON.stringify(gestureState));
        this.resetRefreshStatus();
      },
    });

    this.renderRow = this.renderRow.bind(this);
  }

  componentDidUpdate(prevProps, prevState, prevContext) {
    console.warn('----updated: ' + JSON.stringify(this.props));
    this.resetRefreshStatus();
  }

  renderRow({item, index}) {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center', width: Dimensions.get('window').width, height: '100%'}}>
        <Text>{item}</Text>
      </View>
    );
  }

  render() {
    /******* Test with a VirtualizedList *******/
    return (
      <VirtualizedList
        {...this._panResponder.panHandlers}
        data={DATA}
        ListEmptyComponent={<View/>}
        getItem={getItem}
        getItemCount={getItemCount}
        keyExtractor={keyExtractor}
        renderItem={this.renderRow}
        horizontal={true}
        pagingEnabled={true}
        showsHorizontalScrollIndicator={false}
        ListHeaderComponent={(
          <Animated.View style={{flex: 1, height: '100%', width: this.state.refreshIndicatorWidth, justifyContent: 'center', alignItems: 'center'}}>
            <ActivityIndicator size="large"/>
          </Animated.View>
        )}
        onScroll={this.onScroll}
      />
    );
    /******* Test with a ScrollView *******/
    return (
      <View style={{height:Dimensions.get('window').height}}>
        <ScrollView
          {...this._panResponder.panHandlers}
          horizontal={true}
        >
          <View style={{width: Dimensions.get('window').width * 2, height: 100, backgroundColor: 'green'}}>
            <Text>123</Text>
          </View>
        </ScrollView>
      </View>
    );
  }
}

const getItem = (data, index) => data[index];
const getItemCount = data => data.length;
const keyExtractor = (item, index) => 'R' + index;

export default Test;

临时解决方法（不太完美）

• 直接在内部触发刷新事件（以及动画）onPanResponderGrant：这样，我仍然无法跟踪触摸移动。因此滚动窗格无法跟随触摸点。

• 将操作移入onPanResponderMove附加onMoveShouldSetPanResponder条件（例如添加我自己的“授予”条件判断）：这样，我可以跟踪触摸动作，但由于我没有得到真正的“授予”，所以我无法捕获//事件（即，我不知道触摸事件何时结束，因此永远不知道何时触发刷新事件！*Release）*Terminate*End

完善的解决方案

等待你的想法...

Answer 1

您可以使用contentOffset来确定用户是否在水平列表上“拉动刷新”。以下应该适用于 aFlatList和 a ScrollView：

onScroll={(e) => {
  const xOffset = e.nativeEvent.contentOffset.x;

  // logic goes here to handle a negative value

}}
scrollEventThrottle={16}

当 xOffset 达到某个值时，您可以有条件地执行某些操作或设置一个标志。希望这能让您开始！