跳到主要内容

迁移指南(Migration Guides)

本页将 React Runtime 的多个迁移说明合并到一个页面中,便于集中查阅。

从 v3.x.x 迁移到 v4.x.x

从 v4 开始,React Runtime 支持运行时 Rive Text。

涉及包:

  • @rive-app/react-canvas
  • @rive-app/react-webgl

主要变化

说明(Note):没有破坏性 API 变更

虽然 API 未破坏,但由于底层 Web Runtime 依赖变化,包体积有所增加,因此进行了主版本升级。

如果你的场景不需要 Text 能力,官方未来可能提供更轻量的包;当前主包默认包含该能力。

从 v1.x.x 迁移到 v3.x.x

总体上,从 v1.x.x 升级到 v3.x.x 改动较少。

说明(Note):v2.x.x -> v3.x.x 通常可无改动迁移。

依赖变化

早期你可能安装:

npm i rive-react

后续推荐按渲染器拆分:

  • @rive-app/react-canvas(推荐默认)
  • @rive-app/react-webgl(需要 WebGL 时)
npm i @rive-app/react-canvas

rive-react 仍会发布,但因同时依赖两套 runtime,包体可能更大。

Props 透传行为变化

RiveComponent 结构是「外层 div + 内层 canvas」。

从 v2 开始:

  • className / style → 透传到外层 <div>
  • 其他属性(如 aria-*)→ 透传到 <canvas>

这让无障碍属性更容易直接落在 canvas 元素上。

从 v0.x.x 迁移到 v1.x.x

rive-react v1.0.0 之前,React Runtime 基于 @rive-app/canvasCanvasRenderingContext2D)。

为支持后续高级绘制能力(如 Mesh Deformations),v1 内部改为基于 @rive-app/webgl

迁移影响

  • 无破坏性 API 变更
  • 主要是底层渲染上下文切换为 WebGL

如果升级后遇到问题,请反馈到: