'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. 前端中sprite.png的实现

    通过background-position来控制X轴和Y轴,从而实现显示sprite.png中想要的ico或图案. 如下图所示:

  2. Kanzi编程基础1 - 定时器Timer

    Kanzi虽然发生了比较多的版本更迭,api也发生了很多变化,但定时器的头文件一直都在一个地方:#include "user/include/user/ui/message/kzu_mess ...

  3. 学习UFT11.5历程(三)

    已经用UFT11.5完成了几个大流程的录制和脚本调测. 现整理下这段过程中脚本中应该记住的点(QTP是VB脚本): 1. 循环和条件部分_reporter结果展示 For i = 1 To brow  ...

  4. Dom 概览

    前言 我们已经接触并使用了很多api去操作html文档,例如:appendChild,getElementById, 等等.但是,每当我在浏览器输入document,window 按下回车,会发现还有 ...

  5. springmvc 添加Junit4

    junit 单元测试的好处我就不赘述了,本文旨在介绍自己使用的一个方式: 1.添加依赖 <dependency> <groupId>junit</groupId> ...

  6. 解决JS加载速度慢

    在网页中的js文件引用会很多,js引用通常为 <script src="xxxx.js"></script> 通过如下方法可以增加js加载速度 <sc ...

  7. EasyUI 的Tab 标签添加右键菜单

    样式: 主要提供右键功能代码. (只需要提供你需要的js和css就行了) <!doctype html> <html> <head> <base href=& ...

  8. [分享] 《步步为营封 Win7》--skyfree

    [分享] <步步为营封 Win7>--skyfree Skyfree 发表于 2009-9-13 05:51:32 https://www.itsk.com/thread-20957-1- ...

  9. 知乎背景图 canvas 效果

    思路分析: 1.创造一块画布, 2.在画布内随机产生一些小球,小球位置,半径,颜射,大小,速度等都可以随机产生, 3.定义画小球函数与小球移动函数, 4.将每一个小球圆心都与其它小球链接, 5判断每一 ...

  10. Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...