跳到主要内容

React 运行时（React）

概览（Overview）​

React Runtime 提供：

  • 可直接渲染的 React 组件
  • 一组 hooks（含类型）
  • 对 Web Runtime 的 React 友好封装

源码：

快速开始​

1) 安装依赖​

根据渲染器选择：

  • 推荐：@rive-app/react-webgl2（Rive Renderer）
  • @rive-app/react-canvas（Canvas 路径）
  • @rive-app/react-canvas-lite（体积更小，但功能受限）
npm i --save @rive-app/react-webgl2

2) 渲染基础组件​

import Rive from '@rive-app/react-webgl2';

export const Simple = () => (
  <Rive
    src="https://cdn.rive.app/animations/vehicles.riv"
    stateMachines="bumpy"
  />
);

更多参数请看：

3) 使用 useRive 获取实例​

当你需要控制播放、监听事件、改文本等，建议用 useRive：

import { useRive } from '@rive-app/react-webgl2';

export default function Simple() {
  const { rive, RiveComponent } = useRive({
    src: 'https://cdn.rive.app/animations/vehicles.riv',
    stateMachines: 'bumpy',
    autoplay: false,
  });

  return (
    <RiveComponent
      onMouseEnter={() => rive && rive.play()}
      onMouseLeave={() => rive && rive.pause()}
    />
  );
}

注意（Note）：RiveComponent 渲染后才会真正实例化 Rive（需要 canvas 已进入 DOM）。

渲染注意事项​

如果你会条件渲染 RiveComponent，建议把 useRive 封装在独立子组件中，减少反复卸载/挂载导致的重置或不显示问题。

资源​