使用react-native-skia实现自绘地图实践与踩坑记录

react-native-skia版本: 1.9.1 官方文档 官方demo示例 版本更新日志

Tips: 1.9.1后启用了新的协调器,导致更新版本各种报错,所以没有升级到新版,先使用1.9.1版本

1、Text文字需要font文件?不想引入font文件怎么办

虽然官方文档给了Text使用默认字体的示例,但是实际验证并不生效

解决方案: 使用Paragraph相关api 可不指定字体 默认使用系统字体

2、想要增加字体描边效果,但没有相关api支持

解决方案: 使用Paragraph生成5遍相同文字,第一遍是黑色正文,后面是白色复制内容并分别偏移上下左右四个方向几像素模拟描边效果

3、图片与文字的定位问题

skia中元素定位默认都是以右下角为原点,需要自行偏移 解决方案: 建议给元素xy设置为0,外面包一层Group做transform偏移并且不设置origin 这样可以方便后续增加动画,简单实现可以直接包Group并设置origin, 如果直接设置xy和origin再加上transform偏移,容易造成双重偏移导致偏差

4、旋转中心点问题

默认的旋转中心点是元素原点,如果设置origin改变旋转中心点遇到问题可以采用"先位移旋转再挪回定位点"方案,能达到同样效果

5、Paragraph多段不同字号颜色文字混排

解决方案: 目前Paragraph看起来只有链式增加文字,如果分开写的话可能会造成对不齐问题

6、由四个点组成的不规则四边形path怎么添加圆角

解决方案: path内添加CornerPathEffect实现

7、元素点击事件实现

skia的所有元素都没有点击事件 需要自行实现 解决方案: 闭合的path可以使用path.contains(x,y)实现 非闭合的path及其他形状元素需要自行判断

注意:1、如果元素偏移过,点击事件需要相应的偏移

2、触摸点需要通过屏幕坐标转换到canvas逻辑坐标并反转回自定义坐标系进行匹配

8、权重层级问题

不支持zIndex权重属性 解决方案: skia元素遵循后渲染的层级更高,或自行在数据中添加zIndex属性动态渲染实现

9、手势与state更新冲突引起卡顿

react的state更新会引起组件rerender,频率过高会影响手势操作和动画的更新

解决方案: 使用redux更新数据,需要注意redux数据并不会随着组件销毁而销毁,需要手动清除

10、canvasSize变化后图片位置异常

canvas宽高变化后path会重新绘制,但图片的定位并没有跟着更新位置,可能是skia的bug, 解决方案: 需要canvasSize变化后手动重新设置一遍图片的位置

11、线段缩减动画处理

使用Path组件自带的start&end属性,传递一个动画值

12、线段渐变

Path组件内使用LinearGradient

13、线段起始点绑定元素一起动画(场景:导航线起点绑定车辆)

使用useVectorInterpolation+useAnimatedReaction获取当前进度所在点位并绑定元素动画, 需要注意iniptRange和outputRange需要保持一致的距离比例,否则可能导致获取的点位和实际进度不一致

14、去除线段固定像素

使用虚线效果实现

15、创建矩阵与矩阵的变换

创建:使用skia的Matrix方法,可以是动画值,方便后续制作动效

变换:利用useAnimatedReaction监听动画值的变化,再对应的变换矩阵

16、坐标矩阵转换与反转

使用skia的mapPoint3d和invert4 实现

17、canvas的手势缩放平移矩阵变换处理

canvas内增加Group组件,由Group接收matrix矩阵变换或transform变换,这样Group下面的所有子组件都会自动应用矩阵的变换

18、元素视觉固定大小,不跟随缩放

方案一:需要固定大小的原生不给赋值缩放scale属性,但涉及到和缩放后的原生位置保持,不好实现较复杂

方案二:缩放后再单独处理元素的反缩放,视觉上保持大小不变

相关推荐
老王以为3 天前
React Renderer 分离的多平台架构
前端·react native·react.js
jt君424269 天前
React Native JSI 深入剖析 — 第 7 部分中文技术整理:把 C++ 能力接到 iOS 和 Android
react native
jt君4242610 天前
React Native JSI 深入剖析 — 第 6 部分中文技术整理:跨 JS 与 C++ 两个世界的内存所有权
react native
jt君4242611 天前
React Native JSI 深入剖析 — 第 5 部分中文技术整理:用 HostObject 把 C++ 类暴露给 JavaScript
前端·react native
花椒技术15 天前
RN 多包热更新实践:更新校验、运行时加载与 Bridge 缓存治理
react native·react.js·harmonyos
互联网推荐官15 天前
上海 APP 开发服务甄选:技术架构设计、全维度判断框架
javascript·react native·react.js·app开发·开发经验·上海
墨狂之逸才19 天前
TRAE IDE 提效实战指南:少加班,多摸鱼
react native
墨狂之逸才19 天前
给 AI Coding Agent 装上 React Native 外挂:callstackincubator/agent-skills 上手指南
react native
墨狂之逸才19 天前
# React Native 人脸识别 UI 方案全对比:嵌入组件 · Activity · Dialog
react native
沙漠20 天前
ReactNative总结系列四 --- FlatList白屏卡顿优化
react native·性能优化