Question

我有View通过PanResponder处理程序响应手势。

在View中，我有一个水平且可滚动的FlatList。来自FlatList的滚动事件会冒泡到最终处理它们的View。

我尝试了Gesture Responder System docs中建议的多种组合，包括但不限于

将自己的PanResponder处理程序附加到FlatList
将FlatList包裹在自己的View中并处理手势
尝试使用onScroll={_ => false}上的FlatList阻止滚动事件（可能不是它应该如何工作）
使用View在最顶层onStartShouldSetResponderCapture={_ => false}设置捕获并移动捕获处理程序

然而，似乎没有任何作用。

这是最小的代码：

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

function _getFlatListItem ({item}) {
  return (
    <Text style={{fontSize: 100}}>
      {item.key}
    </Text>
  );
}

export default class ContainerComponent extends Component {
  constructor () {
    this._handleSwipe = this._handleSwipe.bind(this);

    this.state = {
      data: [{
        key: 1
      }, {
        key: 2
      }, {
        key: 3
      }, {
        key: 4
      }]
    };
  }

  _handleSwipe (event, gestureState) {
    // detect gesture here and do whatever
  }

  componentDidMount () {
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: _ => true,
      onMoveShouldSetPanResponder: _ => true,
      onPanResponderRelease: this._handleSwipe,
      onPanResponderTerminate: this._handleSwipe
    });
  }

  render () {
    return (
      <View {...this._panResponder.panHandlers}>
        {/* ...other components here */}
        <FlatList data={this.state.data}
          horizontal
          renderItem={_getFlatListItem}
          scrollEnabled />
        {/* ...some other components here */}
      </View>
    );
  }
};

如果在View上进行滑动，我只是不想触发FlatList的平移处理程序。

我根据滑动的速度筛选出事件，但这只会导致不良用户体验，因为滑动会发生意外情况。

阻止父视图响应对子FlatList进行的手势

0 个答案: