React native 阻止父视图响应子平面列表上的手势

我有一个

视图

，它通过

PanResponder

处理程序响应手势

在

视图

中，我有一个

平面列表

，它是水平的，可以滚动。

FlatList

中的滚动事件被弹出到

视图，该视图最终处理这些事件

我已经尝试了本指南中建议的多种组合，包括但不限于


将自己的
PanResponder
处理程序附加到
FlatList
将
平面列表
包装在自己的
视图
中，以处理手势
正在尝试使用
FlatList
上的
onScroll={{u=>false}
阻止滚动事件（这可能不是它应该如何工作的）
使用
onStartShouldSetResponderCapture={{{u=>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>
    );
  }
};

import React，{Component}来自'React'；
从“react native”导入{FlatList，PanResponder，Text，View}；
函数_getFlatListItem（{item}）{
返回(
{item.key}
);
}
导出默认类ContainerComponent扩展组件{
构造函数（）{
this.\u handlesweep=this.\u handlesweep.bind（this）；
此.state={
数据：[{
关键词：1
}, {
关键词：2
}, {
关键词：3
}, {
关键词：4
}]
};
}
_HandleSweep（事件、手势状态）{
//在这里检测手势并做任何事情
}
组件安装（）{
这是.\u panResponder=panResponder.create({
onStartShouldSetPanResponder:=>true，
onMoveShouldSetPanResponder:\uUx=>true，
onPanResponderRelease:这个。_handlesweep，
onPanResponderTerminate:这个。\u把手擦拭
});
}
渲染（）{
返回(
{/*…此处的其他组件*/}
{/*…此处还有一些其他组件*/}
);
}
};

如果在
FlatList
上进行刷卡，我只想不触发
视图的平移处理程序

我根据刷卡的速度筛选出事件，但这只会导致不良的用户体验，即刷卡时发生意外事件。
您是否尝试在父视图上使用
pointerEvents
道具，并将其设置为
box none
，而FlatList正在平移，否则为“auto”？不。这听起来可能有效。正在尝试。我在平面列表中添加了
onPanResponderGrant
，
onPanResponderRelease
处理程序，用于切换pointerEvents道具。但它的工作原理非常不稳定。它只适用于某些速度。我不确定这是否只是一个模拟器。