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

Question

我已经在我的项目中实现了PanResponder，但它只适用于触摸非触摸元素。当我触摸TouchableOpacity等可触摸元素时，PanReponder不响应。但当我移动手指时TouchableOpacity PanResponder响应。

发生的按钮同样的事情也

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

世博通：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

最后它打我。这是一个非常愚蠢的错误。 忘了在

onStartShouldSetPanResponderCapture:() 

现在添加alert('clicked')，

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

世博通：https://snack.expo.io/ryWx7lBrb

现在，它需要触摸的地方，包括Touchables和按钮。

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 2

我有一个类似的问题。基本上，因为您总是在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); 
    }, 
    ... 
});