'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

先记录问题再研究

React Native 一个组件styles BUG的更多相关文章

  1. React Native 之 组件化开发

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  2. React Native的组件ListView

    React Native的组件ListView类似于iOS中的UITableView和UICollectionView,也就是说React Native的组件ListView既可以实现UITableV ...

  3. React Native交互组件之Touchable

    React Native交互组件之Touchable:只要在组件外面包一个Touchable组件就可以实现点击交互. TouchableHighlight:高亮触摸 当点击时,组件的透明度会改变,可以 ...

  4. React Native常用组件在Android和IOS上的不同

    React Native常用组件在Android和IOS上的不同 一.Text组件在两个平台上的不同表现 1.1 height与fontSize 1.1.1只指定font,不指定height 在这种情 ...

  5. 封装 React Native 原生组件(iOS / Android)

    封装 React Native 原生组件(iOS / Android) 在 React Native中,有很多种丰富的组件了,例如 ScrollView.FlatList.SectionList.Bu ...

  6. 如何基于 React 封装一个组件

    如何基于 React 封装一个组件 前言 很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary , ...

  7. React Native常用组件Image使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  8. React Native常用组件之ListView

    1. ListView常用属性 ScrollView 相关属性样式全部继承 dataSource ListViewDataSource 设置ListView的数据源 initialListSize n ...

  9. React Native常用组件之ScrollView

    1. 两个要点 1.1 ScrollView必须有一个确定的高度才能正常工作 它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作) 通常有两种做法: 第一种: 直接给该S ...

随机推荐

  1. Javascript学习笔记:闭包题解(2)

    代码: var name='The Window'; var object={ name:'My Object', getNameFunc:function(){ return function(){ ...

  2. 单据UI代码开发

    1.构造UI项目后,打开生成的UI项目代码,在Model文件下,如初始化一些字段的值 2.订单明细行中行号设置.订单基本操作按钮提示UFIDA.U9.Base.BaseBP.Agent.dll(代理) ...

  3. URi和Url格式

    1.主要的区别 url一定是有scheme. uri不一定有scheme,可以是相对和绝对的.(相对是依赖环境的) 2.uri的结构(3种划分) 1)[scheme:]scheme-specific- ...

  4. I2C总线(异步)

    起始位与停止位的定义: 起始信号:当SCL为高期间,SDA由高到低的跳变:启动信号是一种电平跳变时序信号,而不是一个电平信号. 停止信号:当SCL为高期间,SDA由低到高的跳变:停止信号也是一种电平跳 ...

  5. Android BadgeView使用

    BadgeView是第三方的插件,用来显示组件上面的标记,起到提醒的作用,下载地址如下:http://files.cnblogs.com/files/hyyweb/android-viewbadger ...

  6. MVC 使用 Ueditor富文本编辑器

    一.Ueditor 1.下载Ueditor富文本编辑器 官方下载地址: http://ueditor.baidu.com/website/download.html 建议下载开发版,此处我下载的是 . ...

  7. 03.JavaScript 面向对象精要--理解对象

    JavaScript 面向对象精要--理解对象 尽管JavaScript里有大量内建引用类型,很可能你还是会频繁的创建自己的对象.JavaScript中的对象是动态的. 一.定义属性 当一个属性第1次 ...

  8. LSMW批处理工具操作手册

          目录     1. 创建PROJECT 1 2.第一步:初始界面后点击执行出现如下对话框 3 3.第二步:维护源结构 8 4.第三步:Maintain Source Fields 9 4. ...

  9. merge into在oracle10g和oracle 11g中的使用差别一

    oracle10g上的代码 MERGE INTO TCGGYSGHCP CP    USING (SELECT *             FROM (SELECT QD.LIFNR,         ...

  10. [sqoop1.99.6] 基于1.99.6版本的一个小例子

    1.创建mysql数据库.表.以及测试数据mysql> desc test;+-------+-------------+------+-----+---------+------------- ...