react-native - 如果我触摸 Touchables(TouchableHighlight、TouchableOpacity、TouchableWithoutFeedback)，PanResponder 无法检测到触摸

Question

我已实现 PanResponder 在我的项目中，但它仅在我触摸不可触摸元素时才有效。当我触摸像 这样的可触摸元素时TouchableOpacity , PanReponder 没有响应。但是当我将手指移到 上时TouchableOpacity PanResponder 响应。

Same thing happening for Button also

请告诉我可能是什么问题。

展会链接: https://snack.expo.io/SyYrtq87W

import React, { Component } from 'react';
import { Button, PanResponder, View, StyleSheet,TouchableOpacity } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  state = {
    show : false
  };
  _panResponder = {};

  componentWillMount() {
    this._panResponder = PanResponder.create({

      onStartShouldSetPanResponder: () => {
        alert('clicked')
        console.log('clicked')
        return true
      },
      onMoveShouldSetPanResponder: () => {
        alert('moved')
        console.log('moved')
        return true
      },
      onStartShouldSetPanResponderCapture: () => false,
      onMoveShouldSetPanResponderCapture: () => false,
      onPanResponderTerminationRequest: () => true,
      onShouldBlockNativeResponder: () => false,
    });
  }

  render() {
    return (
      <View
        style={styles.container}
        collapsable={false}
        {...this._panResponder.panHandlers}>

 {/*********************PanResponder does not respond***************************/}       

        <TouchableOpacity>
          <View style={{width:200, height:200,backgroundColor:'red'}}>
          </View>
        </TouchableOpacity>



        <Button
          title="Here is a button for some reason"
          onPress={() => {}}  
        />

  {/*****************************************************************************/}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  }
});

Answer 1

我有一个类似的问题。基本上是因为你总是在 onStartShouldSetPanResponder 中返回 true和/或 onMoveShouldSetPanResponder他们将接管该触摸事件。

我的解决方法:不要将触摸视为“您的”(PanResponder 的)，除非用户先将其移动到您设置的阈值。

const touchThreshold = 20;
const panResponder = PanResponder.create({
    onStartShouldSetPanResponder : () => false,
    onMoveShouldSetPanResponder : (e, gestureState) => {
        const {dx, dy} = gestureState;

        return (Math.abs(dx) > touchThreshold) || (Math.abs(dy) > touchThreshold);
    },
    ...
});