Ios 反应本机多个应答器

有了这段代码，我如何添加第二个或多个可以独立移动的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;

“严格使用”；
var React=require（'React-native'）；
变量{
应答器，
样式表，
看法
processColor，
}=反应；
var CIRCLE_SIZE=80；
var CIRCLE_COLOR='蓝色'；
var CIRCLE_HIGHLIGHT_COLOR='绿色'；
var PanResponderExample=React.createClass({
静力学：{
标题：“PanResponder示例”，
描述：“显示PanResponder用于提供基本手势处理的用法。”，
},
_panResponder:{}，
_前左：0，
_上一个顶部：0，
_圆环体：{}，
圆：（空：？{setNativeProps（props:Object）：void}），
componentWillMount:function（）{
这是.\u panResponder=panResponder.create({
onStartShouldSetPanResponder:这个。\你的手应该是SetPanResponder，
onMoveShouldSetPanResponder:此.\u handleMoveShouldSetPanResponder，
onPanResponderGrant：这个，
onPanResponderMove:这个。_handlePanResponderMove，
onPanResponderRelease:这个。\u handlePanResponderRend，
onPanResponderTerminate:这个。\u handlePanResponderRend，
});
这个。_先前左=20；
这个._previousTop=84；
这._circleStyles={
风格：{
左：这个，
top:这个
}
};
},
componentDidMount:function（）{
这个。_updatePosition（）；
},
render:function（）{
返回(
{
这个圆=圆；
}}
style={style.circle}
{…这个。_panResponder.panHandlers}
/>
);
},
_突出显示：函数（）{
const circle=this.circle；
圆圈（&circle.setNativeProps）({
风格：{
backgroundColor:processColor（圆圈\突出显示\颜色）
}
});
},
_取消高亮显示：函数（）{
const circle=this.circle；
圆圈（&circle.setNativeProps）({
风格：{
背景颜色：processColor（圆圈颜色）
}
});
},
_updatePosition:function（）{
this.circle&&this.circle.setNativeProps（this.\u circleStyles）；
},
_handleStartShouldSetPanResponder:函数（e:Object，gestureState:Object）：布尔值{
//当用户按下圆圈时，我们是否应该激活？
返回true；
},
_handleMoveShouldSetPanResponder:函数（e:Object，gestureState:Object）：布尔值{
//当用户在圆圈上移动触摸时，我们是否应该激活？
返回true；
},
_handlePanResponderGrant:函数（e:Object，gestureState:Object）{
这个；
},
_handlePanResponderMove:函数（e:Object，gestureState:Object）{
this.\u circleStyles.style.left=this.\u previousLeft+gestureState.dx；
this.\u circleStyles.style.top=this.\u previousTop+gestureState.dy；
这个。_updatePosition（）；
},
_handlePanResponderEnd:函数（e:对象，gestureState:对象）{
这个。_unHighlight（）；
这._previousLeft+=gestureState.dx；
这._previousTop+=gestureState.dy；
},
});
var styles=StyleSheet.create({
圆圈：{
宽度：圆圈大小，
高度：圆形尺寸，
边界半径：圆圈大小/2，
背景颜色：圆圈颜色，
位置：'绝对'，
左:0,，
排名：0，
},
容器：{
弹性：1，
paddingTop:64，
},
});
module.exports=PanResponderExample；

您可以使用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>
    )
};

render:function（）{
返回您的objectsarray.map（（\ux，index）=>(
)
};

你得到答案了吗？实际上我需要它：（@surya purohit我知道已经有一段时间了，但是你有什么解决办法吗？在什么时候我应该担心性能降级？假设我在给定的视图中有10张卡，它们都应该可以相互独立拖动。有10个PanResponder会影响性能吗？我只能凭经验说。我有10-20个PanRespond我的观点相当简单，我认为它们越复杂，对性能的影响就越大