Question

我试图在React Native应用程序中实现拖放。

有没有人使用this？不知怎的，我无法拖动文字。没有足够的步骤来使用npm模块。

调试一段时间后，我发现onLayout＆amp; onLongPress未定义，任何人都可以帮助我吗？

Answer 1

假设您是React Native的新手（就像我一样），并且您没有代码示例，可能会有一些事情发生。 （很有可能你已经知道所有这些事情）。

您是否关注this示例？在这里，他们将onLayout和onLongPress设置为DraggableThing组件的道具。接下来，他们调用具有绑定到这些属性的函数（onDragItemLayout, startDragHandler）的组件。这些函数是通过导入createDropZone提供的，你导入了所有东西吗？

如果你这样做，导入第三方组件有点麻烦，因为大多数时候你需要在xCode中做一些事情。不确定现在是否也是如此，但可能需要考虑一下。

我的建议是看看上面答案中提供的模块。

Answer 2

这是一个简单的React拖放操作。

class Square extends React.Component {
  constructor() {
    super();
    this.state = {
      posx: 10,
      posy: 10,
    };
    this.setDrag = this.setDrag.bind(this);
    this.startDrag = this.startDrag.bind(this);
    this.stopDrag = this.stopDrag.bind(this);
  }
  
  componentDidMount() {
    this.sq.addEventListener('mousedown', this.setDrag);
  }
  
  startDrag(e) {
    this.setState({
      posx: parseInt(e.clientX - this.startPosX, 10),
      posy: parseInt(e.clientY - this.startPosY, 10),
    });
    this.startPosX = e.clientX - this.state.posx;
    this.startPosY = e.clientY - this.state.posy;
  }
  
  stopDrag() {
    document.documentElement.removeEventListener('mousemove', this.startDrag);
    document.documentElement.removeEventListener('mouseup', this.stopDrag);
    this.sq.addEventListener('mousedown', this.setDrag);
  }
  
  setDrag(e) {
    this.sq.removeEventListener('mousedown', this.setDrag);
    this.startPosX = e.clientX - this.state.posx;
    this.startPosY = e.clientY - this.state.posy;
    document.documentElement.addEventListener('mousemove', this.startDrag);
    document.documentElement.addEventListener('mouseup', this.stopDrag);
  }
  
  render() {
    return (
      <div
        className='square'
        style={{
          left: this.state.posx,
          top: this.state.posy,
        }}
        ref={(sq) => { this.sq = sq; }}
      >
        {this.state.posx}
      </div>
    );
  }
}

ReactDOM.render(
  <Square />,
  document.getElementById('app')
);

.square {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #900;
  border: 1px solid #333;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

反应原生拖放

2 个答案: