'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. 禁止从别的应用启动Activity

    在Manifest.xml中设置android:exported="false"即可,如: <activity android:name=".MyAty" ...

  2. 携程Ctrip DAL的学习1

    携程Ctrip DAL的学习 1 本人net开发菜鸟,原理请自行看github的官网源码. 我这里是简单的使用(helloworld的水平). Ctrip DAL是携程框架部开发的数据库访问框架,支持 ...

  3. Codeforces Round #389 (Div. 2, Rated, Based on Technocup 2017 - Elimination Round 3) E. Santa Claus and Tangerines

    E. Santa Claus and Tangerines time limit per test 2 seconds memory limit per test 256 megabytes inpu ...

  4. 动态加载框架DL分析

    动态加载框架DL分析 插件化开发,主要解决三个问题1.动态加载未安装的apk,dex,jar等文件2.activity生命周期的问题,还有service3.Android的资源调用的问题 简单说一下怎 ...

  5. PHP设计模式

    设计模式总的分为三种,创建型模式.结构性模式.行为型模式 1.创建型模式 创建型模式为根据实际情况来创建对象,创建的模式又分为对象创建模式和类创建模式,对象创建模式会把对象创建的一部分在另一个对象中实 ...

  6. python成长之路【第十篇】:浅析python select模块

    一.select介绍 select()的机制中提供一fd_set的数据结构,实际上是一long类型的数组, 每一个数组元素都能与一打开的文件句柄(不管是Socket句柄,还是其他文件或命名管道或设备句 ...

  7. (十五)ioctl、ifreq、ifconf

    ioctl操作   传统上ioctl函数是用于那些普遍使用,但不适合归入其他类别的任何特性的系统接 口.Posix去掉了ioctl,它通过 创建特殊的其功能已被Posix标准化的包裹函数来代替ioct ...

  8. opencv vs环境配置

    1.新建环境变量 OPENCV = D:\Programss\opencv\build 2.%OPENCV%\x86\vc12\bin;加入Path环境变量 3.导入 VS属性表文件 cv2413.p ...

  9. GCC for Win32开发环境介绍

    http://blog.csdn.net/VisionCat/article/details/711693 http://blog.csdn.net/VisionCat/article/categor ...

  10. 配置handler vs2013 iis8.0

    <system.webServer> <modules runAllManagedModulesForAllRequests="true" /> <v ...