Review——RN视图缩放框架react-native-view-transformer解析

发布时间：2020-12-15 20:14:25 所属栏目：百科来源：网络整理

导读：URI与URL的区别：“URI和URL都定义了what the resource is；URL还定义了how to get the resource”——RIO react-native-view-transformer解析一、组成结构： - library - transform - Rect.js - TransformUtils.js - ViewTransformer.js - index.js - .np

URI与URL的区别：“URI和URL都定义了what the resource is；URL还定义了how to get the resource”——RIO

react-native-view-transformer解析

一、组成

结构：

->library
　　->transform
　　　　->Rect.js
　　　　->TransformUtils.js
　　　　->ViewTransformer.js
　　->index.js
　　->.npmignore
　　->package.json
　　->README.md

依赖：

"dependencies": {
    "react-native-gesture-responder": "0.1.1","react-native-scroller": "0.0.6"
  }

react-native-view-transformer（后文简称‘vt’），是基于RN手势系统和滑轮做的一个视图封装组件。含有放大缩小、双击和滑动下拉控制功能。

二、功能解析

vt主要是由transform下的三个文件创造而成。其中，Rect负责构造基本矩形；TransformUtils控制矩形转换的样式；ViewTransformer控制矩形转换的属性。

控制缩放比例：ViewTransformer.js->animateBounce()

animateBounce() {
  let curScale = this.state.scale;
  //最小最大缩放倍数  
  let minScale = 0.2;
  let maxScale = this.props.maxScale;
  let scaleBy = 1;
  if (curScale > maxScale) {
    scaleBy = maxScale / curScale;
  } else if (curScale < minScale) {
    scaleBy = minScale / curScale;
  }

  let rect = transformedRect(this.transformedContentRect(),new Transform(
    scaleBy,0,{
      x: 0,y: 0
    }
  ));

  rect = alignedRect(rect,this.viewPortRect(),scaleBy);
  this.animate(rect);
}

控制界面移动速度：ViewTransformer.js->applyResistance()?

applyResistance(dx,dy) {
  let availablePanDistance = availableTranslateSpace(this.transformedContentRect(),this.viewPortRect());

  if ((dx > 0 && availablePanDistance.left < 0)
    ||
    (dx < 0 && availablePanDistance.right < 0)) {
　　//手势横向移动距离
    dx /= 1;
  }
  if ((dy > 0 && availablePanDistance.top < 0)
    ||
    (dy < 0 && availablePanDistance.bottom < 0)) {
    //手势纵向移动距离   
    dy /= 1;
  }
  return {
    dx,dy
  }
}

—— 未完 ——

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!