Javascript 反应本机拖放动画。仅长按查看

我有一个圆圈，我必须让这些圆圈在指定的空间内移动，如果其中一个受到长时间的压力，那么它就会触发一个事件

我这样做了，但似乎效果不太好

我使用了

Animated.View

和

touchable withoutfeedback

内置的

onLongPress

事件功能，但在某些情况下，它在另一种情况下不起作用

你能给我一些建议吗

链接：

代码：

import React，{Component}来自'React'；
进口{
样式表，
看法
文本，
应答器，
有生气的
可触摸且无反馈，
}从“反应本机”；
类可拖动扩展组件{
建造师（道具）{
超级（道具）；
此.state={
showDraggable：是的，
dropAreaValues:null，
平移：新的动画.ValueXY（），
不透明度：新的动画。值（1），
};
}
组件willmount（）{
这个。_val={x:0，y:0}；
this.state.pan.addListener（value=>（this.\u val=value））；
this.panResponder=panResponder.create({
onStartShouldSetPanResponder:（e，手势）=>true，
onPanResponderGrant：（e，手势）=>{
this.state.pan.setOffset({
x:这个，
y:这个，
});
this.state.pan.setValue（{x:0，y:0}）；
},
onPanResponderMove:Animated.event([
无效的
{dx:this.state.pan.x，dy:this.state.pan.y}，
]),
onPanResponderRelease：（e，手势）=>{
如果（此.isDropArea（手势））{
动画。计时（this.state.opacity{
toValue:0，
持续时间：1000，
}).start（（）=>
这是我的国家({
showDraggable:false，
})
);
}
},
});
}
isDropArea（手势）{
返回手势.moveY<200；
}
render（）{
返回(
{this.renderDraggable（）}
);
}
RenderDragable（）{
const panStyle={
transform:this.state.pan.getTranslateTransform（），
};
if（this.state.showDraggable）{
返回(
console.log（'el:'，this.props.id）}>
{this.props.id}
);
}
}
}
导出默认类应用程序扩展组件{
render（）{
返回(
把它们扔在这里！。
);
}
}
设圆_半径=30；
const styles=StyleSheet.create({
主容器：{
弹性：1，
},
球罐：{
身高：200，
},
圆圈：{
背景颜色：“天蓝色”，
宽度：圆半径*2，
高度：圆半径*2，
边界半径：圆的半径，
},
行：{
flexDirection:'行'，
},
dropZone：{
身高：200，
背景颜色：“#00334d”，
},
正文：{
玛金托普：25，
边缘左：5，
marginRight:5，
textAlign:'中心'，
颜色：“#fff”，
尺寸：25，
fontWeight:'粗体'，
},
});

需要澄清的是，唯一的问题是可触式长压机不工作？有些面工作，有些面不工作。主要的问题是拖放不能正常工作，它停止正常工作。好的，我会发布一个答案，看看我是否理解。

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

class Draggable extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showDraggable: true,
      dropAreaValues: null,
      pan: new Animated.ValueXY(),
      opacity: new Animated.Value(1),
    };
  }

  componentWillMount() {
    this._val = { x: 0, y: 0 };
    this.state.pan.addListener(value => (this._val = value));

    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (e, gesture) => true,
      onPanResponderGrant: (e, gesture) => {
        this.state.pan.setOffset({
          x: this._val.x,
          y: this._val.y,
        });
        this.state.pan.setValue({ x: 0, y: 0 });
      },
      onPanResponderMove: Animated.event([
        null,
        { dx: this.state.pan.x, dy: this.state.pan.y },
      ]),
      onPanResponderRelease: (e, gesture) => {
        if (this.isDropArea(gesture)) {
          Animated.timing(this.state.opacity, {
            toValue: 0,
            duration: 1000,
          }).start(() =>
            this.setState({
              showDraggable: false,
            })
          );
        }
      },
    });
  }

  isDropArea(gesture) {
    return gesture.moveY < 200;
  }

  render() {
    return (
      <View style={{ width: '20%', alignItems: 'center' }}>
        {this.renderDraggable()}
      </View>
    );
  }

  renderDraggable() {
    const panStyle = {
      transform: this.state.pan.getTranslateTransform(),
    };
    if (this.state.showDraggable) {
      return (
        <View style={{ position: 'absolute' }}>
          <Animated.View
            {...this.panResponder.panHandlers}
            style={[panStyle, styles.circle, { opacity: this.state.opacity }]}>
            <TouchableWithoutFeedback
              style={{}}
              onLongPress={() => console.log('el:', this.props.id)}>
                <Text style={styles.text}>{this.props.id}</Text>
            </TouchableWithoutFeedback>
          </Animated.View>
        </View>
      );
    }
  }
}

export default class App extends Component {
  render() {
    return (
      <View style={styles.mainContainer}>
        <View style={styles.dropZone}>
          <Text style={styles.text}>Drop them here!.</Text>
        </View>
        <View style={styles.ballContainer} />
        <View style={styles.row}>
          <Draggable id={1} />
          <Draggable id={2} />
          <Draggable id={3} />
          <Draggable id={4} />
          <Draggable id={5} />
        </View>
      </View>
    );
  }
}

let CIRCLE_RADIUS = 30;
const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
  },
  ballContainer: {
    height: 200,
  },
  circle: {
    backgroundColor: 'skyblue',
    width: CIRCLE_RADIUS * 2,
    height: CIRCLE_RADIUS * 2,
    borderRadius: CIRCLE_RADIUS,
  },
  row: {
    flexDirection: 'row',
  },
  dropZone: {
    height: 200,
    backgroundColor: '#00334d',
  },
  text: {
    marginTop: 25,
    marginLeft: 5,
    marginRight: 5,
    textAlign: 'center',
    color: '#fff',
    fontSize: 25,
    fontWeight: 'bold',
  },
});