如何在觸摸拖動而不是按下時取消TouchableOpacity響應者？

我想實現我自己的react-native swiper組件，但是當Animated.View中添加TouchableOpacity時，swiper會立即停止工作。我認爲Touchable將成爲響應者，而我自己的PanResponder將無法工作。（你可以看到不透明的按下）如何在觸摸拖動而不是按下時取消TouchableOpacity響應者？

問題是，我希望觸摸工作，但如果觸摸屏幕不是一個水龍頭，但拖動，然後我希望sw to工作。（當使用scrollview和Touchables時，這種行爲是有效的）

這裏：Make TouchableOpacity not highlight element when starting to scroll [React Native] 這樣說：「一個滾動手勢應該取消TouchableOpacity觸摸響應者」但這是怎麼完成的？

出於測試目的，我都試圖捕捉響應我Animated.View本：

onStartShouldSetResponderCapture:() => true,

但似乎沒有任何效果（我期待與此揮動的工作，但可觸摸不）。

下面是示例代碼（如果你改變了TouchableOpacity查看刷卡工作）：

import React, { Component } from 'react'; 
import { View, Animated, PanResponder, Dimensions, TouchableOpacity, Text } from 'react-native'; 

class App extends Component { 

    componentWillMount() { 
    const position = new Animated.ValueXY(); 
    const panResponder = PanResponder.create({ 
     onStartShouldSetPanResponder:() => true, 
     onPanResponderMove: (event, gesture) => { 
     position.setValue({ x: gesture.dx, y: 0 }) 
     }, 
     onPanResponderRelease: (event, gesture) => { 
      Animated.spring(this.state.position, { 
       toValue: { x: 0, y: 0 } 
       }).start(); 
     } 
    }); 
    this.state = { panResponder, position }; 
    } 

    render() { 
    return (
      <Animated.View style={[this.state.position.getLayout(), styles.viewStyle]} {...this.state.panResponder.panHandlers}> 
       <TouchableOpacity style={styles.touchableStyle}> 
        <Text>Swipe not working</Text> 
       </TouchableOpacity> 
      </Animated.View> 
    ); 
    } 
} 

const styles = { 
    viewStyle: { 
    position: 'absolute', 
    top: 0, 
    bottom: 0, 
    width: Dimensions.get('window').width 
    }, 
    touchableStyle: { 
    backgroundColor: '#ddd', 
    height: 100, 
    borderWidth: 5, 
    borderColor: '#000', 
    justifyContent: 'center', 
    alignItems: 'center' 
    } 
}; 

export default App;

請幫助我，如果你有解決方案。我試圖讓這個工作一段時間。

來源

2017-09-13 SinunHenkka

它成功地解決問題：

onStartShouldSetPanResponder:() => true

不得不被替換爲：

onMoveShouldSetPanResponder:() => true

還有同樣的問題，不透明度hihglighting，但事實並非如此大的問題。 Make TouchableOpacity not highlight element when starting to scroll [React Native]

來源

2017-09-13 20:01:28 SinunHenkka

此解決方案在Android 7.0設備（榮譽8）上無法使用，觸摸按鍵在90％的時間內失敗。解決方法是讓它工作：'onMoveShouldSetPanResponder :(（event，gesture）=> {Math.abs（gesture.dx）> 5 ||} Math.abs（gesture.dy）> 5; }'成立[here]（https://github.com/facebook/react-native/issues/3082） – SinunHenkka

如何在觸摸拖動而不是按下時取消TouchableOpacity響應者？

回答

相關問題