使用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属性,但涉及到和缩放后的原生位置保持,不好实现较复杂

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

相关推荐
wordbaby4 小时前
如何封装一个生产级的 React Native 分页列表 Hook
前端·react native·react.js
沐言人生2 天前
ReactNative 源码分析5——ReactActivity之启动RN应用
android·react native
沐言人生3 天前
ReactNative 源码分析4——ReactActivity之加载JSBundle
android·react native
沐言人生4 天前
ReactNative 源码分析3——ReactActivity之初始化RN应用
android·react native
一个扣子4 天前
Hermes 未来路线图:2025 年起的新特性与 React Native New Architecture 协同
react native·未来发展·路线图·hermes·字节码diffing·性能增强
沐言人生5 天前
React Native 源码分析1——HybridData 机制深度分析
android·react native
空中海5 天前
01 React Native 基础、核心组件与布局体系
javascript·react native·react.js
Yue1685 天前
一文教你五分钟学会Zustand,React状态管理更加方便!
react native
空中海5 天前
03 性能、动画与 React Native 新架构
react native·react.js·架构
空中海5 天前
02 React Native状态、导航、数据流与设备能力
javascript·react native·react.js