タッチを押すのではなく、タッチしているときにTouchableOpacityレスポンダをキャンセルするにはどうすればいいですか？

Question

私は独自の反応ネイティブのスワイパーコンポーネントを実装しようとしていますが、SwableはAnimable.View内にTouchableOpacityが追加されたときすぐに機能しなくなります。私はTouchableが応答者になり、私自身のpanResponderは動作しないと思う。

問題は私が触れることができるようにすることですが、画面へのタッチが1回のタップではなくドラッグしている場合は、スワイパーを動作させたいのです。 「応答TouchableOpacity touchを解除する必要があり、スクロールジェスチャーは、」しかし、これがどのように行われます。Make TouchableOpacity not highlight element when starting to scroll [React Native] はと言われている。ここで

（TouchablesでscrollViewを使用すると、この現象が働いていますか）？私はこれでスワイプは動作しますが、触れることができるだろうと期待していた（

onStartShouldSetResponderCapture:() => true, 

しかし、効果がないようです：

はテスト目的のために、私はこれで私のAnimated.Viewへの応答を捕獲しようとしていますない）。ここで

は、サンプルコードでは、（あなたがスワイプを表示する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; 

あなたは解決策を持っている場合は、私を助けてください。私はこれを今のところ働かせようとしています。

Answer 1

は、それは問題を解決するために管理：

onStartShouldSetPanResponder:() => true 

に置き換えなければなりませんでした：

onMoveShouldSetPanResponder:() => true 

ありhihglighting不透明度と同じ問題はまだあるが、それはそれほど大きな問題ではありません。 Make TouchableOpacity not highlight element when starting to scroll [React Native]