• 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

    先记录问题再研究

  • 相关阅读:
    非阻塞式线程安全列表-ConcurrentLinkedDeque
    计数器
    Linux 查看服务器内存使用情况
    Oracle to_date, to_timestamp
    Hibernate session.flush() 使用
    阿里规约认证(题库附答案)
    多态性
    Java数据类型
    String类特点分析
    数组的定义
  • 原文地址:https://www.cnblogs.com/Grart/p/5043828.html
Copyright © 2020-2023  润新知