React native 动画拖放到适当的（多个元素之一）元素

我是新手程序员（我参加训练营）。在最后一个项目中，我将创建一些关于将垃圾扔到适当的回收站（如玻璃、纸张、生物……等）的教育性测验。若你们把垃圾倒进合适的垃圾箱，你们就得到了好处

我找到了本教程（在react native中拖放）：

但我有问题。 我如何将一些（垃圾）放入适当的（垃圾箱）并加1分以得分，或在用户将垃圾放入其他垃圾箱时告知其不良行为？ 我对此代码有问题：

返回sporter.moveY>dz.y&&sporter.moveY drow如何测量尺寸并将其与拖动垃圾进行比较

我的例子是：

谢谢。 彼得。

导入{
文本，
看法
样式表，
应答器，
有生气的
尺寸
}从“反应本族语”；
从“React”导入React，{Component}；
从“./styles/style.js”导入样式；
导出默认类视口扩展组件{
建造师（道具）{
超级（道具）；
此.state={
showDraggable：是的，
DropZoneValue:null，
平移：新的动画.ValueXY（），
结果：“nic”，
宽度：“”，
高度：''，
x:“”，
y:'
};
this.panResponder=panResponder.create({
onStartShouldSetPanResponder:（）=>true，
onPanResponderMove:Animated.event（[null{
dx：这个州，泛x，
戴：这个。州。潘。y
}]),
onPanResponderRelease：（e，手势）=>{
如果（此.isDropZone（手势））{
这是我的国家({
showDraggable:false，
结果：“太棒了！”
});
}否则{
春天(
这个.state.pan，
{toValue:{x:0，y:0}
).start（）；
}
}
});
}
isDropZone（手势）{
设dz=this.state.dropZoneValues；
返回sporter.moveY>dz.y&&sporter.moveY{
这是我的国家({
宽度：e.nativeEvent.layout.width，
高度：e.nativeEvent.layout.height，
x:e.nativeEvent.layout.x，
y:e.nativeEvent.layout.y
})
}
render（）{
返回(
标题
金属
玻璃
帕皮尔
混合
其他
{this.state.result}
{this.state.x}{this.state.y}
{this.renderDraggable（）}
);
}
RenderDragable（）{
if（this.state.showDraggable）{
返回(
垃圾1
);
}
}
}

你好，彼得。您应该向我们提供您的代码，以便我们可以查看它并查看需要更改的地方。看见

    import {
    Text,
    View,
    StyleSheet,
    PanResponder,
    Animated,
    Dimensions
    } from "react-native";

    import React, {Component} from "react";
    import styles from './styles/style.js';

export default class Viewport extends Component{
constructor(props){
super(props);

this.state = {
  showDraggable   : true,
  dropZoneValues  : null,
  pan             : new Animated.ValueXY(),
  result: 'nic',
  width: '',
  height: '',
  x: '',
  y: ''
};

this.panResponder = PanResponder.create({
  onStartShouldSetPanResponder: () => true,
  onPanResponderMove: Animated.event([null,{
    dx: this.state.pan.x,
    dy: this.state.pan.y
  }]),
  onPanResponderRelease: (e, gesture) => {
    if(this.isDropZone(gesture)){
      this.setState({
        showDraggable : false,
        result: 'super!'
      });
    }else{
      Animated.spring(
      this.state.pan,
      {toValue:{x: 0,y:0}}
      ).start();
      }
     }
   });
 }

    isDropZone(gesture){
      let dz = this.state.dropZoneValues;
       return gesture.moveY > dz.y && gesture.moveY < dz.y + dz.height;

 }

 setDropZoneValues(event){
   this.setState({
     dropZoneValues: event.nativeEvent.layout
    });
 }
 onLayout = (e) => {
   this.setState({
    width: e.nativeEvent.layout.width,
    height: e.nativeEvent.layout.height,
     x: e.nativeEvent.layout.x,
  y: e.nativeEvent.layout.y
   })
  }

render(){
  return (
 <View style={styles.mainContainer}>
    <View style={styles.filler}/>
     <View style={styles.logo}>
     <Text>Title</Text></View>
    <View style={styles.bins}>
         <View style={styles.bins__wrapper} >
           <Text style={styles.category}>Metals</Text>
        <Text style={styles.category}>Glas</Text>
        <Text style={styles.category}>Papier</Text>
        <Text style={styles.category} onLayout={this.onLayout}>Mix</Text>
        <Text style={styles.category}  onLayout={this.setDropZoneValues.bind(this)}>           </Text>
        <Text style={styles.category}>Others</Text>
       </View>
     </View>


  <View style={styles.trash}></View>
  <View style={styles.scores}><Text>{this.state.result}
    {this.state.x} {this.state.y}</Text></View>

  {this.renderDraggable()}
</View>

  );
 }

 renderDraggable(){
   if(this.state.showDraggable){
    return (
    <View style={styles.draggableContainer}>
      <Animated.View
      {...this.panResponder.panHandlers}
      style={[this.state.pan.getLayout(), styles.circle]}>
        <Text style={styles.text}>Trash1</Text>
      </Animated.View>

    </View>
    );
    }
   }
 }