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

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

    this.state = {
      panResponder: PanResponder.create({
        onStartShouldSetPanResponder: () => true,
        onPanResponderMove: this.handlePanResponderMove,
      }),
    };
  }

  handlePanResponderMove = (event, gestureState) => {
    // 更新视图的位置
    this.refs.box.setNativeProps({
      style: {
        left: gestureState.dx,
        top: gestureState.dy,
      },
    });
  };

  render() {
    return (
      <View
        ref="box"
        style={styles.box}
        {...this.state.panResponder.panHandlers}
      />
    );
  }
}

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
    position: 'absolute',
  },
});

export default DraggableBox;