React Native 一个组件styles BUG

‘use strict‘;
var React = require(‘react-native‘);
var {
  StyleSheet,
  PanResponder,
  View,
  Text
} = React;

var CIRCLE_SIZE = 40;

var PanResponderExample = React.createClass({

componentWillMount: function() {
  this._panResponder = PanResponder.create({
  onStartShouldSetPanResponder: ()=>true,
  onMoveShouldSetPanResponder: ()=>true,
  onPanResponderGrant: ()=>{},
  onPanResponderMove: this._handlePanResponderMove,
  onPanResponderRelease: ()=>{},
  onPanResponderTerminate: ()=>{},
  });
  this._previousLeft = 20;
  this._previousTop = 84;
  this._circleStyles = {
  left: this._previousLeft,
  top: this._previousTop,
  };
},

render: function() {
  return (
  <View style={{backgroundColor: ‘#6495ed‘,flex: 1}}>
  <View style={[styles.circle,this._circleStyles]}
        {...this._panResponder.panHandlers} />

  <Text style={ styles.bottomText}>
    _previousLeft: {this._previousLeft},    
    _previousTop: {this._previousTop},
    left: {this._circleStyles.left},
    top: {this._circleStyles.top}
  </Text>
  </View>
  );
},
_handlePanResponderMove: function(e: Object, gestureState: Object) {
  //**can‘t apply style left&top
  //this._circleStyles.left = this._previousLeft + gestureState.dx;
  //this._circleStyles.top = this._previousTop + gestureState.dy;


  //**can apply style left&top
  this._circleStyles = {
    left: this._previousLeft + gestureState.dx,
    top: this._previousTop + gestureState.dy
  };

  this.setState();
}
});

var styles = StyleSheet.create({
circle: {
  width: CIRCLE_SIZE,
  height: CIRCLE_SIZE,
  borderRadius: CIRCLE_SIZE / 2,
  backgroundColor: ‘blue‘,
  position: ‘absolute‘
}
});

module.exports = PanResponderExample;

  this._circleStyles.left = this._previousLeft + gestureState.dx;
  this._circleStyles.top = this._previousTop + gestureState.dy;