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: {
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的更多相关文章
- React Native 之 组件化开发
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native的组件ListView
React Native的组件ListView类似于iOS中的UITableView和UICollectionView,也就是说React Native的组件ListView既可以实现UITableV ...
- React Native交互组件之Touchable
React Native交互组件之Touchable:只要在组件外面包一个Touchable组件就可以实现点击交互. TouchableHighlight:高亮触摸 当点击时,组件的透明度会改变,可以 ...
- React Native常用组件在Android和IOS上的不同
React Native常用组件在Android和IOS上的不同 一.Text组件在两个平台上的不同表现 1.1 height与fontSize 1.1.1只指定font,不指定height 在这种情 ...
- 封装 React Native 原生组件(iOS / Android)
封装 React Native 原生组件(iOS / Android) 在 React Native中,有很多种丰富的组件了,例如 ScrollView.FlatList.SectionList.Bu ...
- 如何基于 React 封装一个组件
如何基于 React 封装一个组件 前言 很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary , ...
- React Native常用组件Image使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native常用组件之ListView
1. ListView常用属性 ScrollView 相关属性样式全部继承 dataSource ListViewDataSource 设置ListView的数据源 initialListSize n ...
- React Native常用组件之ScrollView
1. 两个要点 1.1 ScrollView必须有一个确定的高度才能正常工作 它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作) 通常有两种做法: 第一种: 直接给该S ...
随机推荐
- phpcms 中路径问题
<table width="100%" border="0" cellspacing="0" cellpadding="0& ...
- 用pecl/pear独立编译PHP扩展 vs. 把扩展编译到PHP内核中
将扩展编译到php内部的方式会提高php运行扩展的效率,但是每次需要新添加扩展时都需要把php以及之前添加的所有扩展重新编译一边,非常麻烦. 独立编译扩展,php外部调用扩展的方式虽然会牺牲一点点的性 ...
- Canvas实现图片放大缩小移动操作
对于HTML5相信大家都不陌生,很早就出来了,但是貌似都没有真正的使用过.最近做项目时要实现这样一个需求:一个图片,大小不固定,要求能实现类似地图一样放大.缩小.移动功能.这里就很合适使用html5的 ...
- SVN分支和映射总结和数据库初步使用
SVN使用总结 常用的诸如检出,update,add就不说了. 1.创建分支-----新建分支目录,在分支文件夹下导入项目folder文件夹.分支不会影响主干trunk的代码,可以随意修改. 2.sv ...
- About LIS(Longest Increasing Subsequence)
今天528给讲了基础的DP,其中第一道例题就是最长不下降子序列——LIS. 题目简述:给出N个数,求最长不下降子序列的长度. 数据范围:30% N<=1000 ; 100% N<=1000 ...
- 平衡二叉树AVL
1.定义 平衡二叉树(Balanced Binary Tree)是二叉查找树的一个改进,也是第一个引入平衡概念的二叉树.1962年,G.M. Adelson-Velsky 和 E.M. Landis发 ...
- epoll里面mmap释疑
今天看到有文章说epoll里面用了mmap,还说进程不需要从内核读数据,只需要从用户态buffer读数据就可以.觉得很神奇,就查了一下,发现完全不是描述的那样.实际上,只是把要传递的fd通过mmap来 ...
- iOS 调试问题汇总
// PBXcp error修复-No such file or directory (2013-05-02 15:20:50) 差不多算是Xcode比较常见的一个编译错误了,原因往往是添加或删除美术 ...
- socket了解(转)
http://blog.chinaunix.net/uid-26000296-id-3758651.html http://blog.csdn.net/mengyafei43/article/deta ...
- Address already in use: JVM_Bind:8080 的解决办法<转>
出错情况:运行 Tomcat 时报错 含义:8080 位置显示的端口被其他进程占用 解决方法: 方法1: 开始--运行--cmd 进入命令提示符 输入netstat -ano 即可看到所有连接的PID ...