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

Question

我在我的项目中实现了 PanResponder ，但只有当我触摸不可触摸的元素时它才有效。当我触摸 TouchableOpacity 等可触摸元素时，PanReponder不会响应。但是当我在 TouchableOpacity 上移动手指时，PanResponder会响应。

  

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，他们将对该触摸事件发出命令。

我的解决方法：不要考虑触摸＆＃34;你的＆＃34; （PanResponder＆＃39; 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>