拖拉：解決...

Viewport.js

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

const CIRCLE_SIZE = 80;

class Viewport extends Component {
  constructor(props) {
    super(props)

    this.state = {
      pan     : new Animated.ValueXY(),
      center  : {x:0, y:0},
    };

    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: Animated.event([null, {
        dx: this.state.pan.x, // x,y are Animated.Value
        dy: this.state.pan.y,
      }]),
      // onPanResponderRelease: () => {
      //   Animated.spring(
      //     this.state.pan,         // Auto-multiplexed
      //     {toValue: {x: 0, y: 0}} // Back to zero
      //   ).start();
      //
      //   // console.log(this.circle.props.style[0]);
      //   // this.state.pan.setOffset(this.state.pan.getLayout());
      //   // console.log(this.state.pan);
      // },
      onPanResponderRelease: (evt, gestureState) => {
        let center = this.state.center;

        this.setState(Object.assign(this.state, {
          center: {
            x: center.x + gestureState.dx,
            y: center.y + gestureState.dy
          }
        }));
      },
      onPanResponderMove: (evt, gestureState) => {
        // console.log(1, evt.nativeEvent);
        // console.log(2, gestureState.dx, gestureState.dy);
        let center = this.state.center;

        this.state.pan.x.setValue(gestureState.dx + center.x);
        this.state.pan.y.setValue(gestureState.dy + center.y);
      }
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={{
          position: 'absolute',
          top: (Window.height - CIRCLE_SIZE)/2,
          left: (Window.width - CIRCLE_SIZE)/2,
        }}>
          <Animated.View ref={(circle) => {this.circle = circle;}} {...this.panResponder.panHandlers} style={[this.state.pan.getLayout(), styles.circle]}></Animated.View>
        </View>
      </View>
    )
  }
}

const Window = Dimensions.get('window');

const styles = StyleSheet.create({
  container         : {
    flex: 1,
    backgroundColor: 'rgb(255, 184, 0)'
  },
  circle: {
    position: 'absolute',
    width: CIRCLE_SIZE,
    height: CIRCLE_SIZE,
    borderRadius: CIRCLE_SIZE/2,
    backgroundColor: 'rgb(200, 0, 0)',
    // top: (Window.height - CIRCLE_SIZE)/2,
    // left: (Window.width - CIRCLE_SIZE)/2,
  }
})

export default Viewport;