我们把通过 measure 方法得到尺寸信息进行向上与向下取整,得到一个阈值范围,手动设置的尺寸信息只要在这个阈值范围内,就认为是有效尺寸,这种容错机制有效的兼容了极端情况,提高了组件的稳定性。 精细化布局控制在使用 Form 组件时,最常见的需求就是校验功能,通常组件库的 Form 组件都会内置校验功能。然而,因为校验方式有同步与异步两种,校验结果展示的样式、位置五花八门,这就导致了校验功能的复杂度变得很高。
绝对定位:
Static 定位:
自定义位置
如何有效的兼顾不同的需求?我们提出了校验独立实现的方式,在使用 Form 组件的父组件中,使用 CVD 来定义、配置校验规则,校验结果输出到统一的数据结构(单一数据源),基于这个数据结构,我们就能在任意时机、任意位置、使用任意样式来展示校验信息。
下面我们先介绍下 CVD:
本质是就是使用 Symbol link,但是我们建立好软链接后,运行打包命令却报错了,错误信息为 Expected path '/xxx/xxx/index.js' to be relative to one of project roots
我们前端开发通常会用 Webpack 做为打包工具,而 React Native 应用使用的是 Metro,我们需要分析 Metro 来定位问题。 Webpack vs Metro经过 Metro 的源码分析,我们发现 Metro 的打包方案与 Webpack 有较大差异,Webpack 是根据入口文件,即配置中的 entry 属性,递归解析依赖,构建依赖关系图而 Metro 是爬取特定路径下的所有文件来构建依赖关系图。
分析发现 Metro 的特定路径默认是运行打包命里的路径,以及 node_modules 下第一层目录,这样我们就定位到了问题的所在: