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

Posted 2021-11-29 bbcfive

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

—— 未完 ——