如何在触摸拖动而不是按下时取消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响应者？

回答

相关问题