react-native - 触摸拖动而不是按下时如何取消TouchableOpacity响应器？

Question

我正在尝试实现我自己的 react-native swiper 组件，但是当在 Animated.View 中添加 TouchableOpacity 时，swiper 立即停止工作。我认为 Touchable 将成为响应者，而我自己的 panResponder 将无法工作。 (你可以看到压制的不透明度)

问题是我希望 touchable 能够工作，但是如果对屏幕的触摸不是轻轻一按而是拖动，那么我希望 swiper 能够工作。 (此行为在使用带有 Touchables 的 scrollView 时有效)

这里: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;

如果您有解决方案，请帮助我。我已经尝试让它工作一段时间了。

Answer 1

它设法解决了这个问题:

onStartShouldSetPanResponder: () => true

必须替换为:

onMoveShouldSetPanResponder: () => true

opacity hihglighting 仍然存在同样的问题，但这不是什么大问题。
Make TouchableOpacity not highlight element when starting to scroll [React Native]