用于处理多个 PanResponder 的 panHandlers 参数？

Question

假设我有两个简单的动画视图。 我想知道哪个View被平移了。 如何将任何参数传递给它或任何其他检测方式？ 谢谢

<Animated.View {...this._panResponder.panHandlers}></Animated.View>
<Animated.View {...this._panResponder.panHandlers}></Animated.View>

Answer 1

在您的PanResponder实现中，检查target属性并使用findNodeHandle找出它引用的组件，例如

import { findNodeHandle } from 'react-native'

...

constructor (props) {
  super (props)

  // initialize array for refs
  this.animatedViewRefs = []

  this.panResponder = PanResponder.create({
    ...
    onStartShouldSetPanResponderCapture: ({ nativeEvent: { target } }, _) => {  
      const component = this.findComponentByTarget(target)

      // now `component` will either be null or a reference to your animated view
    }
    ...
  })
}

// helper method for finding component
findComponentByTarget (target) {
  for (const ref of this.animatedViewRefs) {
    if (target === findNodeHandle(ref)) {
      return ref
    }
  }

  return null
}

在您的渲染方法中，您将拥有

<Animated.View 
  ref={ref => (this.animatedViewRefs[0] = ref)} 
  {...this.panResponder.panHandlers} />

<Animated.View 
  ref={ref => (this.animatedViewRefs[1] = ref)} 
  {...this.panResponder.panHandlers} />

...

<Animated.View 
  ref={ref => (this.animatedViewRefs[n] = ref)} 
  {...this.panResponder.panHandlers} />

Answer 2

//passing parameters
<Animated.View {...this._PanResponder('pass parameter here 1').panHandlers}></Animated.View>
<Animated.View {...this._PanResponder('pass parameter here 2').panHandlers}></Animated.View>
//handler
panResponder = (receive parameter here) =>
PanResponder.create({ 
//code here
.
.
.
})

Answer 3

我尚未对此进行测试，但我认为您应该能够为类似于以下示例的每个视图创建不同的响应程序。

this._firstPanResponder = PanResponder.create({
  onPanResponderGrant: (evt, gestureState) => {
    // Do something when the first responder is granted
    this.doFirst();
  },
});
this._secondPanResponder = PanResponder.create({
  onPanResponderGrant: (evt, gestureState) => {
    // Do something when the second responder is granted
    this.doSecond();
  },
});

然后视图应该看起来像这样。

<Animated.View {...this._firstPanResponder.panHandlers}></Animated.View>
<Animated.View {...this._secondPanResponder.panHandlers}></Animated.View>

希望这可以帮助。