前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >react-native手势和视图

react-native手势和视图

作者头像
IT架构圈
发布2018-05-31 16:02:30
1.2K0
发布2018-05-31 16:02:30
举报
文章被收录于专栏:IT架构圈

react-native的手势操作,从而去看了关于View的许多文档,现在做个总结。 首先,还是要知道他的解释,看了文档的都知道,react-native的View,不论在什么平台上,他都对应一个平台的原生视图,无论他是UIView、div、还是android.view.View。 然后再是去看他的属性方法,这些属性方法就是今天的重头戏了。

一、onLayout function 当组件挂载或者变化的时候调用,内部有nativeEvent.layout属性,包含四个参数:

代码语言:javascript
复制
    x(距离根元素x轴距离),
    y(记录根元素y轴距离),
    width(当前View的宽),
    height(当前View的高),

例子:

代码语言:javascript
复制
    <View style={{flex:1,}}   
      onLayout={(event) => {  
        var viewWidth = event.nativeEvent.layout.width;  
        var viewHeight = event.nativeEvent.layout.height;  
        if (!viewWidth || this.state.containerViewWidth === viewWidth) {  
          return;  
        }  
        this.setState({  
          containerViewWidth: viewWidth,  
          containerViewHeight: viewHeight,  
        });  
     }}/>  

以上例子把View的宽和高保存在state中,用于以后计算

二、手势操作

代码语言:javascript
复制
1.View.porps.handleStartShouldSetPanResponder
用户通过触摸激活手势的responder,返回true
2.View.porps.onMoveSetPanResponder
用户通过滑动激活手势的responder,返回true
3.View.porps.handlePanResponderGrant
如果组件被激活,该方法调用,一般用于显示激活的状态
4.View.porps.handlePanResponderReject
多个respond被触发时,触发该方法的不激活respond
5.View.porps.handlePanResponderMove
用户滑动手指,该方法被调用
6.View.porpshandlePanResponderEnd
用户释放手指,该方法被调用,一般用于恢复无激活时的状态
7.View.porps.handlePanRespondeTerminationRequest
多个respond被触发时,该方法决定谁被激活(一个组件只允许同时激活一个respond)
8.View.porps.onStartShouldSetResponderCapture
9.View.porps.onMoveShouldSetResponderCapture

组合技能:

1和2同时返回为true,表示respond被激活 8和9同时返回为true,表示同一家族(即祖宗、父、子组件)中该组件被激活。 这个要多讲一下,因为组件的respond激活是按照冒泡排序的,即最内层(子组件)最先被激活。 而当你在外层即父组件的8和9设置返回true时,该组件优先被激活。

所以一次正常的触摸手势流程为:

代码语言:javascript
复制
touch或move  --> grant  -->  move  -->  release

以上方法被操作时还会传入两个值(e: Object, gestureState: Object)

代码语言:javascript
复制
e表示event
gestureState里面有三个参数:
dx/dy:手势进行到现在的横向/纵向相对位移
vx/vy:此刻的横向/纵向速度
numberActiveTouches:responder上的触摸的个数

例子如下:

代码语言:javascript
复制
_highlight: function() {  
  this._circleStyles.style.backgroundColor = 'red';  
  this._updateNativeStyles();  
},  
_unHighlight: function() {  
  this._circleStyles.style.backgroundColor = 'black';  
  this._updateNativeStyles();  
},  
_updateNativeStyles: function() {  
  this.circle && this.circle.setNativeProps(this._circleStyles);  
},  
_handleStartShouldSetPanResponder: function(e: Object, gestureState: Object): boolean {  
  // Should we become active when the user presses down on the circle?  
  return true;  
},  
_handleMoveShouldSetPanResponder: function(e: Object, gestureState: Object): boolean {  
  // Should we become active when the user moves a touch over the circle?  
  return true;  
},  
_handlePanResponderGrant: function(e: Object, gestureState: Object) {  
  this._highlight();  
},  
_handlePanResponderMove: function(e: Object, gestureState: Object) {  
  this._circleStyles.style.left = xxx;  
  this._circleStyles.style.top = yyy;*/  
  let rad = this.state.containerViewWidth - CIRCLE_SIZE  
  this._circleStyles.style.left = this._previousLeft + gestureState.dx;  
  this._circleStyles.style.top = this._previousTop + gestureState.dy;  
  this._updateNativeStyles();  
},  
_handlePanResponderEnd: function(e: Object, gestureState: Object) {  
  this._unHighlight();  
  this._previousLeft += gestureState.dx;  
  this._previousTop += gestureState.dy;  
},  

不激活时为黑色,点击时为红色,该组件随手势移动。

三、style

在View的style里面有个一个transform属性,前端的童鞋应该都知道吧

代码语言:javascript
复制
transform [
        {perspective: number}, 
        {rotate: string},
        {rotateX: string}, 
        {rotateY: string}, 
        {rotateZ: string},
        {scale: number}, 
        {scaleX: number},
        {scaleY: number},
      {translateX: number}, 
      {translateY: number},
      {skewX: string}, 
      {skewY: string}
] 
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-03-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 编程坑太多 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档