react-native: [PanResponder] onPanResponderMove locationX/locationY values incorrect

Is this a bug report?

yes

Have you read the Bugs section of the How to Contribute guide?

yes

Environment

1. react-native -v: 0.43.4
2. node -v: v6.9.1
3. npm -v: 3.10.8
4. yarn --version: 0.18.1

Then, specify:

• Target Platform: iOS

• Development Operating System: macOS

• Build tools: Xcode

Steps to Reproduce

(Write your steps here:)

1. use panResponder
2. console.log locationX and locationY of view when I move it in onPanResponderMove

Expected Behavior

the locationX change with the view move

Actual Behavior

locationX do change when view move, but the value is not currect, just like:

locationX : 38.5 locationY : 53.5 locationX : 152.5 locationY : 278.5 locationX : 29.5 locationY : 45 locationX : 138 locationY : 264.5

Reproducible Demo

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

export default class TouchStartAndRelease extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            backgroundColor: 'red',
            marginTop: 100,
            marginLeft: 100,
        }
    }

    componentWillMount(){
        this._panResponder = PanResponder.create({
            onStartShouldSetPanResponder: (evt, gestureState) => {
                return true;
            },
            onMoveShouldSetPanResponder:  (evt, gestureState) => {
                return true;
            },
            onPanResponderGrant: (evt, gestureState) => {
                this._highlight();
            },
            onPanResponderMove: (evt, gestureState) => {
                console.log(`locationX : ${evt.nativeEvent.locationX}   locationY : ${evt.nativeEvent.locationY}`);
                this.setState({
                        marginLeft: evt.nativeEvent.locationX,
                        marginTop: evt.nativeEvent.locationY,
                });
            },
            onPanResponderRelease: (evt, gestureState) => {
                this._unhighlight();
            },
            onPanResponderTerminate: (evt, gestureState) => {
            },
        });
    }

    _unhighlight(){
        this.setState({
            backgroundColor: 'red',
        });
    }

    _highlight(){
        this.setState({
            backgroundColor: 'blue',
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={[styles.redView,
                    {
                        backgroundColor: this.state.backgroundColor,
                        marginTop: this.state.marginTop,
                        marginLeft: this.state.marginLeft,
                    }
                ]}
                    {...this._panResponder.panHandlers}
                ></View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    redView: {
        width: 100,
        height: 100,
    },

});

AppRegistry.registerComponent('TouchStartAndRelease', () => TouchStartAndRelease);