React Native 多个 panresponders

Posted 2023-03-15

【中文标题】React Native 多个 panresponders

【英文标题】：React Native multiple panresponders

【发布时间】：2016-03-05 07:14:59

【问题描述】：

使用此代码，我将如何添加第二个或多个可以相互独立移动的 panresponder？如果我使用相同的 panresponder 实例和代码，它们将一起移动。我想知道如何拥有几个可独立拖动的 panresponder。

'use strict';

var React = require('react-native');
var 
  PanResponder,
  StyleSheet,
  View,
  processColor,
 = React;

var CIRCLE_SIZE = 80;
var CIRCLE_COLOR = 'blue';
var CIRCLE_HIGHLIGHT_COLOR = 'green';

var PanResponderExample = React.createClass(

  statics: 
    title: 'PanResponder Sample',
    description: 'Shows the use of PanResponder to provide basic gesture handling.',
  ,

  _panResponder: ,
  _previousLeft: 0,
  _previousTop: 0,
  _circleStyles: ,
  circle: (null : ? setNativeProps(props: Object): void ),

  componentWillMount: function() 
    this._panResponder = PanResponder.create(
      onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
      onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
      onPanResponderGrant: this._handlePanResponderGrant,
      onPanResponderMove: this._handlePanResponderMove,
      onPanResponderRelease: this._handlePanResponderEnd,
      onPanResponderTerminate: this._handlePanResponderEnd,
    );
    this._previousLeft = 20;
    this._previousTop = 84;
    this._circleStyles = 
      style: 
        left: this._previousLeft,
        top: this._previousTop
      
    ;
  ,

  componentDidMount: function() 
    this._updatePosition();
  ,

  render: function() 
    return (
      <View
        style=styles.container>
        <View
          ref=(circle) => 
            this.circle = circle;
          
          style=styles.circle
          ...this._panResponder.panHandlers
        />
      </View>
    );
  ,

  _highlight: function() 
    const circle = this.circle;
    circle && circle.setNativeProps(
      style: 
        backgroundColor: processColor(CIRCLE_HIGHLIGHT_COLOR)
      
    );
  ,

  _unHighlight: function() 
    const circle = this.circle;
    circle && circle.setNativeProps(
      style: 
        backgroundColor: processColor(CIRCLE_COLOR)
      
    );
  ,

  _updatePosition: function() 
    this.circle && this.circle.setNativeProps(this._circleStyles);
  ,

  _handleStartShouldSetPanResponder: function(e: Object, gestureState: Object): boolean 
    // Should we become active when the user presses down on the circle?
    return true;
  ,

  _handleMoveShouldSetPanResponder: function(e: Object, gestureState: Object): boolean 
    // Should we become active when the user moves a touch over the circle?
    return true;
  ,

  _handlePanResponderGrant: function(e: Object, gestureState: Object) 
    this._highlight();
  ,
  _handlePanResponderMove: function(e: Object, gestureState: Object) 
    this._circleStyles.style.left = this._previousLeft + gestureState.dx;
    this._circleStyles.style.top = this._previousTop + gestureState.dy;
    this._updatePosition();
  ,
  _handlePanResponderEnd: function(e: Object, gestureState: Object) 
    this._unHighlight();
    this._previousLeft += gestureState.dx;
    this._previousTop += gestureState.dy;
  ,
);

var styles = StyleSheet.create(
  circle: 
    width: CIRCLE_SIZE,
    height: CIRCLE_SIZE,
    borderRadius: CIRCLE_SIZE / 2,
    backgroundColor: CIRCLE_COLOR,
    position: 'absolute',
    left: 0,
    top: 0,
  ,
  container: 
    flex: 1,
    paddingTop: 64,
  ,
);

module.exports = PanResponderExample;

【问题讨论】：

你有答案了吗？？其实我很需要它:(

@surya-purohit 我知道这已经有一段时间了，但你有什么解决办法吗？

【参考方案1】：

您可以使用 PanResponder 数组，创建方式如下：

this._panResponders = yourObjectsArray.map((_, index) => (
    PanResponder.create(
        onMoveShouldSetPanResponder: () => true,
        ...
    )
));

yourObjectsArray 是一个数组，可用于创建任意数量的 panResponder，我想该数组中的每个对象都将对应于用于创建可移动视图的任何数据结构的数据实例。

然后在您的视图中实际使用它：

render: function() 
    return yourObjectsArray.map((_, index) => (
        <View
            style=styles.container>
            <View
                ... some stuff here ...
                ...this._panResponders[index].panHandlers
            />
        </View>
    )
;

【讨论】：

我应该在什么时候担心性能降级？假设我在给定视图上有 10 张卡片，它们都应该可以相互独立地拖动。拥有 10 个 panResponder 会影响性能吗？

我只能凭经验说话。我有 10 到 20 名泛型响应者，到目前为止似乎运作良好。虽然我的观点相当简单，但我想它们越复杂，对性能的影响就越大