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

    先记录问题再研究

  • 相关阅读:
    Sql Server 日期时间格式转换
    Windows7中pagefil.sys和Hiberfil.sys文件删除与转移
    64位机的pl/sql不安装32位oracle的连接方式
    cmd下进入oracle sqlplus
    杂七杂八
    做题记录Ⅱ
    SPOJ GSS8
    AGC036 A-Triangle | 构造
    Atcoder 题目泛做
    CF398A Cards | 贪心
  • 原文地址:https://www.cnblogs.com/Grart/p/5043828.html
Copyright © 2011-2022 走看看