Skip to main content

项目难点汇总：

· 8 min read

rn项目难点​

大量注意事项，容易造成奇怪的问题​

  1. 没有固定定位 position: 'fixed' 无效
  2. 绝对定位元素高度高于父级元素，超出部分会被隐藏
  3. ios 设置backgroundColor后borderRadius失效，overflow:hidden可以解决
  4. position: 'absolute' 和 display: 'none'， 同时使用，display:'none'无效
  5. scrollView需要设置背景样式，vivo会有滚动样式兼容问题
  6. 没有设置具体height的情况下，部分手机（魅族mx6），设置borderRadius后backgroundColor会失效，需要分两个容器分别设置圆角和背景
  7. 远程调试模式下，定时器 动画等会失效，如果遇到有些api不好使，可以关掉远程调试再试试
  8. webview需要增加一层View容器，并且设置宽高和overflow:hidden，否则部分手机可能有白屏问题
  9. webview渲染html，需要添加baseUrl:“/”，否则部分手机(魅族)出现html内的js脚本失效的问题
  10. 无障碍，屏蔽掉textInput placeholder的默认朗读，添加importantForAccessibility="no"，如果外层有touch系列标签，也会屏蔽掉父级朗读，如果需要自定义朗读，可以在之间加一层view。
  11. 不要随便打印事件回调里面的e，太大，可能导致rn崩掉
  12. 无障碍模式下，Text包裹Text，里层的Text的onPress事件会失效(大部分手机)，将Text分开写即可解决
  13. 无障碍，小心奇怪的字体会导致旁白无法识别，奇怪的字体也会导致部分手机(小米)显示异常
  14. 无障碍，2后面跟汉字会读成两，解决办法在2后面添加，安卓可以加空格，ios加-
  15. display:none 如果View里面有文字，隐藏之后会有个不占位置同文字颜色一样的小点，，最后和opacity:0 配合使用。
  16. 多行Text如果有的手机会导致文字上或下被截，可以设置lineHeight解决。(部分1+手机多行文字会被截断)
  17. Text ios手机会自带比fontSize高3-4个单位的（大概1.5倍，需要用手机测试获取默认的lineHeight高度） ios: height -> lineHeight 5 -> 8
    10 -> 15
    20 -> 29
  18. Text文字上下居中办法：
    1. 使用View flex实现上下居中
    2. 仅ios, 如果View容器高度不满足ios文字默认的lineHeight高度时，需要添加lineHeight使文字上下居中, 如果View是定位元素，还需要添加height
  19. 祖先元素的圆角无法作用到当前图片，最好给图片父级元素添加圆角
  20. 羊角符console.warn('￥', '¥')，使用后面这个，有的前面这个在华为手机有兼容问题
  21. Modal组件如果动画类型没有的时候，关闭的时候ios会闪一下，最好默认使用fade动画类型
  22. Text不允许设置边框，ios设置无效（需要设置两层容器，第一次容器将第二层容器设置成弹性容器，可以实现第二层容器自适应宽度，第二层容器来实现圆角和边框）
  23. 焦点抢占问题，scrollView内input聚焦状态下，点击其他按钮，会触发input失焦事件，需要再次点击按钮触发点击，可以给scrollView添加keyboardShouldPersistTaps='awalys'，允许点击穿透，然后给整个页面添加点击事件，手动设置input失焦。
  24. ref.measure获取不到元素位置信息，给ref元素添加backgroundColor样式即可。

性能问题​

列表拖拽交换位置，拖拽至容器边界时触发自动滚动，把位置更新设置成16ms，安卓运行正常，但iphone(7)会明显卡顿 最后只实现了交换位置，没有边界自动滚动功能

动画问题​

ios和安卓动画执行表现不一致，当页面发生跳转时（打开新的activity,不是路由间跳转）触发动画，安卓动画会暂停，而ios会执行完动画，返回页面时会看到安卓后面的动画执行，体验不好。 优化：等动画执行完之后在跳转，动画的start回调中监听finished为ture

多个动画同时触发时卡顿，比如一个列表可以左滑展开操作按钮，先左滑一个列表项，再左滑另一个列表项，需要先关闭前一个列表项，且同时展开当前列表项，动画执行卡顿。 优化：把展开的左滑实例和位置不要放在组件内部状态中，直接放在global中，减少值的传递，动画明显流畅。

各类兼容性问题​

华为P9圆角失效、华为荣耀magic4 1单位线条不展示等各种问题。

小程序开发者工具难点​

主进程阻塞问题​

webpack运行小程序项目时，运行过程中ide整个页面无法点击 优化：将webpack执行，放到work子进程中，通过ipc通信获取webpack执行进度信息。进程管理需要注意重新启动和运行失败都需要关闭子进程process.exit(1)。

真机调试问题​

adb获取设备列表失败问题 安卓真机调试断联问题 优化：直接断点调试adbkit源码，查看执行逻辑，发现是逻辑错误，修改源码修复

devtool 点击元素选中按钮后模拟器页面无法点击： 优化：最后采用了关闭“暂停状态覆盖”选项配置，参考https://github.com/electron/electron/issues/22340

ios真机调试断联问题 优化：直接断点调试iosUsbDebugger源码，发现CDP协议判断逻辑中属性名称错误 result.result 改成 result.result || result.properties，兼容两种属性取值。

低代码项目​

环境搭建有版本依赖要求，依赖python vs nodejs 需要熟悉opensumi源码和整体架构设计，集成开发方式、monaco编辑器api，因opensumi整体采用单BrowserWindow架构设计，所以如果需要新开一个窗口，需要自己用opensumi的规范重写一套启动逻辑，如果不符合规范就需要自己手写前后台通信和ioc容器设计。

dsl规范设计，为了性能，将dsl设计成SchemaForm的数据结构，减少更新数据时数据转换逻辑。

ast：需要熟悉ast解析、组合、生成有一定的了解。

组件库​

简单组件没什么难度，需要考虑边界问题，自测 瀑布流组件比较有难度：因为瀑布流需要做虚拟列表和支持图片自适应 瀑布流原理很简单，计算列高，往最短的列添加元素。 虚拟列表设置可视区域，区域外的元素卸载掉，元素位置和可视区域比较，会导致瀑布流元素多次卸载和挂载，需要放置重复计算。 支持图片，则需要监听图片的高度变化，ResizeObserver监听容器变化，图片异步加载特性，所以瀑布流并不是从上往下按顺序计算的，而是根据高度变化判断要更新哪些元素，需要做变化元素的收集，然后从最靠前的元素开始计算位置。

最麻烦的一个问题，图片可能未加载就被滑出可视范围，当用户划回去，图片需要重新加载，意味着这个元素后面的元素全部都需要重新计算，所以需要对计算任务切片，每完成一个片段，给页面刷新的时间，再次继续计算。

图片加载还有怪异的问题，第一次图片加载完后，页面会取缓存，有时候取缓存会很快，但偶尔取的很慢，就导致图片被重新加载了，重新加载会导致高度变化，触发更新。通过防抖解决图片重新加载的问题。

vscode插件开发​

代码补全​

// 获取文档字符串内容
const text = document?.getText() ?? '';
// 获取鼠标偏移值
const offset = document?.offsetAt(params.position) ?? 0;
// RegExp.exec() 循环匹配光标是否在样式书写范围内,在范围内则返回整个CompletionItem[]数据，vscode会自动匹配出对应的提示词

hover提示​

// 需要返回提示内容和范围起点和终点

// 判断hover是否在样式函数内

// 找到对应的样式后，找到样式的名称，起点和终点
// 根据起点和终点转成vscode的Range格式
range = { start: document?.positionAt(start), end: document?.positionAt(end) }
// 再根据样式函数获取提示内容，return Hover格式的对象

思路简单，但是匹配规则和边界处理很复杂。

taro​

taro rn不能选择react-native版本，需要手动降级版本到和客户端版本一致，版本降级会导致依赖包版本不匹配，运行报错，需要分析依赖包之间的版本关系，找到合适的版本