React native 在React Native中同时进行多个拖放

你好，我正在用react native创建一个游戏，我被卡住了，因为我不希望两个玩家可以在同一部手机上同时水平拖放一个元素

我有两个类似的组件：

export class Player1 extends Component{
    constructor(props){
        super(props);

        this.state = {  
            pan             : new Animated.ValueXY()
        };
    }
    componentWillMount(){
        this.panResponder = PanResponder.create({    
            onMoveShouldSetResponderCapture : () => true,
            onMoveShouldSetPanResponderCapture : () => true,

            onPanResponderGrant : (e, gestureState) => {
                this.state.pan.setOffset({x: this.state.pan.x._value, y: this.state.pan.y._value});
                this.state.pan.setValue({x: 0, y: 0});
            },

            onPanResponderMove : Animated.event([null,{ 
                dx : this.state.pan.x,
            }]),
            onPanResponderRelease: (e, {vx, vy}) => {
            }
        });
    }


    render(){
        return (
                <View style={styles.mainContainer}>
                    {this.renderDraggable()}
                </View>
        );
    }

    renderDraggable(){
        return (
                <View style={styles.draggableContainer}>
                    <Animated.View                  
                    style={[this.state.pan.getLayout(), styles.triangle]}
                    {...this.panResponder.panHandlers}   > 
                    </Animated.View>
            </View>

        );
}
}

export default function HomeScreen() {
  return (
    <View>
     <Player1></Player1>
     <Player2></Player2>
    </View>
  );
}

导出类Player1扩展组件{
建造师（道具）{
超级（道具）；
this.state={
平移：新的动画.ValueXY（）
};
}
组件willmount（）{
this.panResponder=panResponder.create（{
onMoveShouldSetResponderCapture:（）=>true，
onMoveShouldSetPanResponderCapture:（）=>true，
onPanResponderGrant:（e，手势状态）=>{
setOffset（{x:this.state.pan.x._值，y:this.state.pan.y._值}）；
this.state.pan.setValue（{x:0，y:0}）；
},
onPanResponderMove:Animated.event（[null，{
dx：这个州，泛x，
}]),
onPanResponderRelease:（e，{vx，vy}）=>{
}
});
}
render（）{
返回(
{this.renderDraggable（）}
);
}
RenderDragable（）{
返回(
);
}
}

在我的屏幕中，我这样调用我的组件：

export class Player1 extends Component{
    constructor(props){
        super(props);

        this.state = {  
            pan             : new Animated.ValueXY()
        };
    }
    componentWillMount(){
        this.panResponder = PanResponder.create({    
            onMoveShouldSetResponderCapture : () => true,
            onMoveShouldSetPanResponderCapture : () => true,

            onPanResponderGrant : (e, gestureState) => {
                this.state.pan.setOffset({x: this.state.pan.x._value, y: this.state.pan.y._value});
                this.state.pan.setValue({x: 0, y: 0});
            },

            onPanResponderMove : Animated.event([null,{ 
                dx : this.state.pan.x,
            }]),
            onPanResponderRelease: (e, {vx, vy}) => {
            }
        });
    }


    render(){
        return (
                <View style={styles.mainContainer}>
                    {this.renderDraggable()}
                </View>
        );
    }

    renderDraggable(){
        return (
                <View style={styles.draggableContainer}>
                    <Animated.View                  
                    style={[this.state.pan.getLayout(), styles.triangle]}
                    {...this.panResponder.panHandlers}   > 
                    </Animated.View>
            </View>

        );
}
}

export default function HomeScreen() {
  return (
    <View>
     <Player1></Player1>
     <Player2></Player2>
    </View>
  );
}

导出默认功能主屏幕（）{
返回(
);
}

---

感谢您的帮助

我找到了一个解决方案，我使用了示例目录DoubleDragable中的react native手势句柄：

我的代码：

import React, { Component } from 'react';
import { Animated, StyleSheet, View } from 'react-native';

import {
  PanGestureHandler,
  ScrollView,
  State,
} from 'react-native-gesture-handler';


export class Players extends Component {
  constructor(props) {
    super(props);
    this._translateX = new Animated.Value(0);
    this._translateY = new Animated.Value(0);
    this._lastOffset = { x: 0, y: 0 };
    this._onGestureEvent = Animated.event(
      [
        {
          nativeEvent: {
            translationX: this._translateX,

          },
        },
      ],

    );
  }
  _onHandlerStateChange = event => {
    if (event.nativeEvent.oldState === State.ACTIVE) {
      this._lastOffset.x += event.nativeEvent.translationX;
      this._translateX.setOffset(this._lastOffset.x);
      this._translateX.setValue(0);
      this._translateY.setOffset(this._lastOffset.y);
      this._translateY.setValue(0);
    }
  };
  render() {
    return (
      <PanGestureHandler
        {...this.props}
        onGestureEvent={this._onGestureEvent}
        onHandlerStateChange={this._onHandlerStateChange}>
        <Animated.View
          style={[
            styles.box,
            {
              transform: [
                { translateX: this._translateX },
                { translateY: this._translateY },
              ],
            },
            this.props.boxStyle,
          ]}
        />
      </PanGestureHandler>
    );
  }
}

export default class Example extends Component {
  render() {
    return (
      <View style={styles.scrollView}>
        <DraggableBox />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
  },
  box: {
    position: 'absolute',
    width: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderLeftWidth: 25,
    borderRightWidth: 25,
    borderBottomWidth: 50,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
  },
});

import React，{Component}来自'React'；
从“react native”导入{动画、样式表、视图}；
进口{
PanGestureHandler，
滚动视图，
国家,，
}来自“反应本机手势处理程序”；
导出类扩展组件{
建造师（道具）{
超级（道具）；
此._translateX=新的动画.Value（0）；
此.u translateY=新的动画.Value（0）；
这个._lastOffset={x:0，y:0}；
此.\u onGestureEvent=Animated.event(
[
{
nativeEvent：{
翻译X：这个，
},
},
],
);
}
_onHandlerStateChange=事件=>{
如果（event.nativeEvent.oldState===State.ACTIVE）{
此._lastOffset.x+=event.nativeEvent.translationX；
此.u translateX.setOffset（此.u lastOffset.x）；
此.u translateX.setValue（0）；
this.\u translateY.setOffset（this.\u lastOffset.y）；
此.u translateY.setValue（0）；
}
};
render（）{
返回(
);
}
}
导出默认类示例扩展组件{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
滚动视图：{
弹性：1，
},
方框：{
位置：'绝对'，
宽度：0，
高度:0,，
背景色：“透明”，
边框样式：“实心”，
边线宽度：25，
边线宽度：25，
宽度：50，
borderLeftColor:'透明'，
borderRightColor:“透明”，
},
});

和屏幕：

<View styles={styles.container}>
  <Players boxStyle={styles.player1}></Players>
  <Players boxStyle={styles.player2}></Players>
</View>