zoukankan      html  css  js  c++  java
  • 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: {
       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

    先记录问题再研究

  • 相关阅读:
    BZOJ 3122 SDOI2013 随机数生成器
    【BZOJ 1178】【APIO 2009】CONVENTION会议中心
    【BZOJ 3242】【UOJ #126】【CodeVS 3047】【NOI 2013】快餐店
    【BZOJ 2118】墨墨的等式
    【BZOJ 4547】【HDU 5157】小奇的集合
    【BZOJ 4455】【UOJ #185】【ZJOI 2016】小星星
    【BZOJ 3879】SvT
    【BZOJ 4104】【THUSC 2015】解密运算
    【POJ 2482】Stars in Your Window
    【HDU 2089】不要62
  • 原文地址:https://www.cnblogs.com/Grart/p/5043828.html
Copyright © 2011-2022 走看看