'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. nginx 日志变量含义

    log_format logstash "remote_addr | $time_local | $request | $status | $body_bytes_sent | " ...

  2. 用css改变鼠标选中文字的样式

    打开一个页面,选中一段文字,会出现系统默认的蓝色背景和白色文字,如下图: 那么 这种选中效果我们怎么去自定制呢,比如我想让文字选中的时候背景是绿色,文字是白色 我们在css文件中插入如下代码: ::- ...

  3. Windows 更改桌面位置

    运行regedit HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\User Shell Folders 找到 ...

  4. Android判断GPS是否开启和强制帮用户打开GPS

    引子:在我们的应用为用户提供定位服务时,通常想为用户提供精确点的定位服务,这是需要用户配合的.我们必须先检测用户手机的GPS当前是否打开,若没打开则弹出对话框提示.用户若不配合我们也没办法,只能采用基 ...

  5. 无法删除对象 '产品',因为该对象正由一个 FOREIGN KEY 约束引用。

    在删除northwindcs表时,发生报错,消息 3726,级别 16,状态 1,第 2 行,无法删除对象 '产品',因为该对象正由一个 FOREIGN KEY 约束引用.此时判断是因为有其他表的外键 ...

  6. Evolutionary Computing: 5. Evolutionary Strategies(1)

    resource: Evolutionary computing, A.E.Eiben Outline What is Evolution Strategies Introductory Exampl ...

  7. 个人评测——K米

    K米APP案例分析 关于 K米 -- 的案例分析 产品 K米的APP (全国KTV点歌,手机直播,互动,交友,预订)的Android客户端 第一部分 调研,评测 评测: 软件的bug,功能评测,黑箱测 ...

  8. js中对象 类 实例的区别 数据类型 创建对象

    类是对象的具体细分,实例是类中的一个具体事物. 基本数据类型和 引用数据类型 基本数据类型:numble string undefined null 引用数据类型:对象和函数 对象数据类型又细分为:对 ...

  9. Leetcode--Merge Two Sorted Lists

    static ListNode *mergeTwoLists(ListNode *l1, ListNode *l2) { ListNode *temp = ); ListNode *head = te ...

  10. linux发行版基础目录

    linux发行版基础目录 linux 基础目录 linux基础目录 目录 作用 / 根目录,起源 /boot linux引导启动目录 /lib 库目录 /bin 常用内部命令 /sbin 常用内部管理 ...