如果我触摸Touchables（TouchableHighlight，TouchableOpacity，TouchableWithoutFeedback），PanResponder无法检测到触摸

Question

我已经在我的项目中实现了PanResponder ，但只有当我触摸不可触摸的元素时它才有效。 当我触摸触摸的元素，如TouchableOpacity，当我移动我的TouchableOpacity PanResponder手指响应PanReponder不responds.But。

Button也发生了同样的事情

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

Expo Link： 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和/或onMoveShouldSetPanResponder返回true，他们将对该触摸事件进行命令。

我的解决方法：不要考虑触摸“你的”（PanResponder's），除非用户先按你设置的阈值移动它。

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);
    },
    ...
});

Answer 2

终于它击中了我。 这是一个非常愚蠢的错误。 忘了添加alert('clicked')

onStartShouldSetPanResponderCapture: ()

现在，

onStartShouldSetPanResponderCapture: () => {alert('clicked') ; return false},

Expo Link： https ： //snack.expo.io/ryWx7lBrb

现在，无处不在，包括Touchables和Buttons。

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')
        return true
      },
      onMoveShouldSetPanResponder: () => true,
      onStartShouldSetPanResponderCapture: () => {alert('clicked') ; return false},
      onMoveShouldSetPanResponderCapture: () => false,
      onPanResponderTerminationRequest: () => true,
      onShouldBlockNativeResponder: () => false,
    });
  }

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

 {/*********************PanResponder now responds***************************/}       

        <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 3

如果你设置它，触摸将无法工作

onStartShouldSetPanResponder: () => true

这将完全控制触摸。 仅当用户开始拖动组件时，始终是一个很好的选择。

onMoveShouldSetPanResponder: () => true

以下是PanResponder的示例。

    this.panResponder = PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderMove: (event, gesture) => {
        if (gesture.dy > 0 && this.state.size._value < width) {
          this.state.size.setValue(40 + gesture.dy)
        }
      },
      onPanResponderRelease: () => {
        Animated.spring(this.state.size, {
          toValue: 40
        }).start()
      }
    })

这是我的JSX代码。

<Animated.View {...this.panResponder.panHandlers}>
    <TouchableWithoutFeedback onPress={this.openImage}>
        <Animated.Image style={profileImage}
           source={{uri: 'https://example.com/face.jpg'}}/>
     </TouchableWithoutFeedback>
 </Animated.View>