标签：new 结构 封装 转换 基于 r.js pmi 定义 ndis
URI与URL的区别：“URI和URL都定义了what the resource is；URL还定义了how to get the resource”——RIO
一、组成
结构：
->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 } }
—— 未完 ——
Review——RN视图缩放框架react-native-view-transformer解析
标签：new 结构 封装 转换 基于 r.js pmi 定义 ndis
原文地址：https://www.cnblogs.com/bbcfive/p/10850327.html
