React 支持

Vreo 支持 React Context 与 Hooks 相配合的模式使用，简单样例如下：

const FiveProvider = createFiveProvider();
const App: React.FC = () => {
  return (
    <FiveProvider initialWork={work}>
      <FiveCanvas width={width} height={height} />
      <VreoProvider>
        {/* React 渲染的其他模块 */}
        <YourAppComponent />
      </VreoProvider>
    </FiveProvider>
  );
};

您可以访问 Vreo React Demo 查看详细源码。

高阶组件

<VreoProvider>

Vreo 提供高阶组件<VreoProvider>，您无需通过 new VreoPlayer() 的形式创建 Vreo 实例：

const FiveProvider = createFiveProvider()

<FiveProvider initialWork={work}>
  <FiveCanvas width={width} height={height} />
  <VreoProvider>
    {/* React 渲染的其他模块 */}
    <YourAppComponent />
  </VreoProvider>
</FiveProvider>

提示

需要注意的是 <VreoProvider> 必须搭配 <FiveProvider> 一同使用。

Hooks 函数

除了高阶组件之外，还提供了配套的 React Hooks 函数使用。

useVreoAction

获取 Vreo 内置的执行函数。

const {
  load, // 载入剧本数据
  show, // 显示面板
  hide, // 隐藏面板
  pause, // 暂停
  play, // 播放
  dispose, // 销毁 (一般不会手动触发)
} = useVreoAction();

useVreoEventCallback

添加 Vreo 异步事件回调监听。

useVreoEventCallback(VreoKeyframeEnum.PanoTag, callback);

useVreoPausedState

获取 Vreo 当前的播放状态。

const paused = useVreoPausedState();