PanResponder無法檢測到觸摸，如果我觸摸Touchet（TouchableHighlight，TouchableOpacity，TouchableWithoutFeedback）

我已經在我的項目中實現了PanResponder，但它只適用於觸摸非觸摸元素。當我觸摸TouchableOpacity等可觸摸元素時，PanReponder不響應。但當我移動手指時TouchableOpacity PanResponder響應。PanResponder無法檢測到觸摸，如果我觸摸Touchet（TouchableHighlight，TouchableOpacity，TouchableWithoutFeedback）

發生的按鈕同樣的事情也

請告訴我，可能是什麼問題。

世博通：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', 
    } 
});

來源

2017-06-20 tonysta

您分享的github問題與您正在談論的內容相反，或者您確實需要重新解釋您的問題。 '當我觸摸TouchableOpacity等可觸摸元素時，它不響應 - 誰不響應？觸摸或響應者？ –

對不起。這是沒有響應的PanResponder。觸摸工作正常。 – tonysta

在你提供的問題的鏈接中，可疑物沒有響應，所以它是一個不同的問題。我認爲響應者正在爲你正確地工作，如果你想要可觸摸的不響應，你可以禁用他們的指針事件。 –

最後它打我。這是一個非常愚蠢的錯誤。忘了在

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

來源

2017-07-13 13:21:58 tonysta

我有一個類似的問題。基本上，因爲您總是在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); 
    }, 
    ... 
});

來源

2017-06-21 08:54:09

您提供了與我所詢問的內容相反的解決方案。我的問題是如果我觸摸可觸摸的，PanResponder沒有迴應，Touchables反應良好。在我的情況下，Touchables對PanResponder發出了指令 – tonysta

在您的情況中，PanResponder對其他觸摸事件發出了指令，但在我的案例中，Touchables對PanResponder發出指令。 – tonysta

PanResponder無法檢測到觸摸，如果我觸摸Touchet（TouchableHighlight，TouchableOpacity，TouchableWithoutFeedback）

回答

相關問題