Skip to main content

React 支持

Vreo 支持 React ContextHooks 相配合的模式使用,简单样例如下:

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()