'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;
在函数_handlePanResponderMove中使用:
this._circleStyles.left = this._previousLeft + gestureState.dx; this._circleStyles.top = this._previousTop + gestureState.dy;
组件样式<View style={[styles.circle,this._circleStyles]}>
没有发生变化,必须使用
this._circleStyles = { left: this._previousLeft + gestureState.dx, top: this._previousTop + gestureState.dy };
环境react 0.14.0 winx64
先记录问题再研究