用途:在 React Native 中使用 @shopify/react-native-skia 进行 GPU 加速的 2D 绘图与动画。Canvas 内部是独立的 React 渲染器,JSX 绘制到 Skia 表面而非原生视图。
主要能力:声明式绘制 Circle、Rect、Path、Image 等图元;通过 Group 级联颜色、透明度、着色器与滤镜;图像滤镜(Blur、Shadow、ColorMatrix)、BackdropBlur 背景模糊;SkSL 自定义着色器与 RuntimeShader;Paragraph API 富文本排版;Atlas 单次绘制批量渲染精灵;Picture 录制与离屏渲染;SVG 渲染。
用法要点:Reanimated 共享值直接作为 Skia 组件 props 传入,无需 createAnimatedComponent 或 useAnimatedProps;颜色动画必须用 @shopify/react-native-skia 的 interpolateColors,而非 Reanimated 的 interpolateColor;Paragraph、Picture、ImageSVG 不遵循标准 paint 继承,需用 layer 属性;Group 变换原点默认左上角,居中旋转需显式设置 origin。
适用场景:自定义图表与图形、GPU 模糊/阴影/滤镜、60 FPS 路径与着色器动画、混合字体富文本、Atlas 精灵与瓦片批量渲染、SkSL 自定义滤镜、离屏生成缩略图。
限制:Skia 仅支持 2D,不用于 3D;标准 UI 布局、简单静态图片、纯文本界面应使用 React Native 原生组件;Canvas 元素对屏幕阅读器不可访问,无障碍内容需叠加原生视图。资料未提供安装命令、版本要求与收费信息。