当前位置 : 主页 > 网页制作 > React >

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

来源:互联网 收集:自由互联 发布时间:2021-06-15
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 - ViewTran

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,
    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
  }
}

—— 未完 ——

网友评论