React Native中的多个PanResponder（可拖动）元素

Question

只是寻找一些指针以使用PanResponder在React Native中创建第二个可拖动元素。

所以我在componentWillMount函数中有此代码

  componentWillMount = () => { this._panResponder = PanResponder.create({ onStartShouldSetPanResponder: this._alwaysTrue, onMoveShouldSetPanResponder: this._alwaysTrue, onPanResponderGrant: this._handlePanResponderGrant, onPanResponderMove: this._handlePanResponderMove, onPanResponderRelease: this._handlePanResponderEnd, onPanResponderTerminate: this._handlePanResponderEnd }); 

现在，很明显，所有函数（例如_handlePanResponderMove）也已定义。

然后我将其绑定到SVG元素

 <Circle cx={this.state.x} cy={this.state.y} r="45" fill="white" {...this._panResponder.panHandlers} /> 

如果我只有一个SVG圆，现在可以正常拖动了。 我将如何进行第二次循环-我肯定比创建一个具有所有功能的新panResponder更好的方法了吗？ 将相同的{... this._panResponder.panHandlers}放入第二个SVG圈显然是行不通的； 然后，两个圆圈将同时移动到相同的位置。

任何指针将不胜感激。 谢谢！

Answer 1

因此，我通过创建两个PanResponders找到了一个临时解决方案。 这是不理想的（不是DRY），因为要重复大量的代码。 我在JS中没有足够的经验，无法弄清楚如何将正确的参数传递给这些函数，因此现在必须这样做。

  this._panResponder = PanResponder.create({ onMoveShouldSetPanResponder: this._alwaysTrue, onPanResponderMove: (evt, gestureState) => { this.setState({ x: this._previousLeft + gestureState.dx, y: this._previousTop + gestureState.dy }); }, onPanResponderEnd: (evt, gestureState) => { this._previousLeft += gestureState.dx; this._previousTop += gestureState.dy; }, }); this._secondPanResponder = PanResponder.create({ onMoveShouldSetPanResponder: this._alwaysTrue, onPanResponderMove: (evt, gestureState) => { this.setState({ xS: this._previousSLeft + gestureState.dx, yS: this._previousSTop + gestureState.dy }); }, onPanResponderEnd: (evt, gestureState) => { this._previousSLeft += gestureState.dx; this._previousSTop += gestureState.dy; }, });