react-native-skia

React Native Skia

需要自定义绘图时使用 Skia。保留可访问的原生控件和普通布局，使用原生视图。对于现有应用，在更改依赖或架构前，检查实际锁定的 Skia、React Native、React、Reanimated 和 Worklets 版本、目标平台、渲染后端以及相关组件。

根据工作负载选择

对于稳定且带有动画属性的场景，使用保留式绘图；只有在录制不断变化的命令列表确有必要时才使用 Picture；对于共享纹理的重复精灵，使用 Atlas。只有在性能分析或工作负载支持这种权衡时，才复用纹理来绘制重复的高成本图案。着色器并不一定比形状更快；模糊、过度绘制、纹理上传、分辨率和实时资源数量都会产生影响。

明确预期的视觉层次、交互、资源、边界和减少动态效果时的状态。对于宽泛的创意请求，选择连贯的方向并继续推进；小效果无需设计研讨。保留下方参考资料中实用的设计方法和图元选择方法。

当前集成规则

阅读当前契约，了解与版本相关的设置。原生二进制文件现在通过包依赖提供，而不是由 Skia 的 postinstall 下载器获取。不要启用任意生命周期脚本，也不要把添加 Bun trust 条目作为常规修复方案。确认构建实际解析到了平台包。

将共享值或派生值直接传给绘图属性。不要仅为实现动画，就用 createAnimatedComponent/useAnimatedProps 包装 Skia 绘图节点；原生覆盖视图则是另一种情况。Skia 颜色应使用 Skia 的 interpolateColors。将 React 状态和 context 决策保留在独立的绘图渲染器之外，或有意桥接所需的 context。Worklets 仍会占用帧时间。

对于分组状态，当前的 select API 可以绑定对象字段。不要将 withTiming/withSpring 对象嵌套在该状态中，并假定 Reanimated 会为每个字段添加动画；请改用单独的动画值或计算得出的普通值。

妥善处理异步图像、字体、视频和着色器编译失败。对于需要换行或多种样式的文本，优先使用 Paragraph。在将视觉缺陷归因于性能问题前，先检查绘图原点、弧度、裁剪以及 paint/layer 语义。对于包含纹理的快照，请在正确的渲染上下文中使用文档规定的异步路径，并等待资源确实就绪，而不要使用固定的任意延迟。

生命周期和无障碍

卸载时，以及装饰性循环或帧回调在屏幕外或应用进入后台时不再需要时，应将其取消或停用。提供有意义的减少动态效果静态状态。Reanimated 的 useReducedMotion 会读取启动时的偏好；如果应用必须在运行期间响应偏好变化，请使用实际的响应式设置订阅。

使用可访问的原生控件复现相关命中区域和变换，并提供标签、焦点、键盘和屏幕阅读器操作，以及足够大的命中目标。Canvas 的无障碍标签不会暴露其中各个可交互形状。应验证连续手势、手势取消、边界变化和多点触控，而不只是单次理想拖动。相关交互应使用同一代兼容的 Gesture Handler；根据所选技术栈调整模板中的手势 API。

检查与验证

已移除旧版正则表达式审计：它会根据依赖范围推断已安装的版本，并要求应用过时的 postinstall 修复方案。请改为检查锁文件、依赖解析结果、原生构建日志、实际组件状态和有针对性的源码搜索。注释或相邻组件中的令牌只能作为线索。

在实际项目中对改造后的组件进行类型检查。验证资源、加载／错误状态、密度、方向、字体、触控／无障碍功能，以及适用情况下的 Web CanvasKit 加载情况。在有代表性的设备上对接近发布版本的构建进行性能分析，包括 GPU 开销和内存。Mock 和 CanvasKit 测试不能证明原生渲染正确；在 UI 线程上执行、启用预热标志或使用 Atlas 节点，都不能保证帧率。

报告补丁、预期效果、所选基元的适用原因、观察结果，以及尚待完成的设备／浏览器检查。不要将未经测量的工作描述为对 GPU 友好或开销近乎为零。将 Graphite/@next 视为明确选择的实验方案，而非常规升级路径。

为任务加载参考资料

• 当前约定：设置、资源、版本。
• 决策树：渲染基元。
• 动效设计：构图与视觉意图。
• 性能：已测量的瓶颈。
• 调试：根据症状进行调查。
• 示例：实现方法。
• 模板索引：可改造的起始示例。
• 评估：维护者输出／触发检查。

参考资料和模板相对于技能目录，而不是目标应用中的文件。模板只是起始示例，并未针对所有当前原生技术栈进行认证。保留其中有用的设计，同时检查实际导入、生命周期和语义。