跳到正文

Vue → React 迁移

两个框架使用相同的 AudioTrackAudioSnapshotAudioPlayerErrorAudioPlayerHandle。迁移主要发生在框架绑定层:

VueReact
<VueAudioNative :tracks="tracks" /><AudioPlayer tracks={tracks} />
@statechangeonStateChange
@trackchangeonTrackChange
defineExpose 组件 refforwardRef<AudioPlayerHandle>
useAudioPlayer() + Vue refuseAudioPlayer() + callback audioRef
artwork slotartwork ReactNode 或 (track) => ReactNode
tip / slotTiphint ReactNode
before-controls / after-controlsbeforeControls / afterControls ReactNode

React 的 beforeControls / afterControls 不是 render props;需要 controlssnapshot 时, 通过 forwarded ref 或 Headless Hook 获取。

不要把 Vue 0.x 的连字符事件名直接复制到 JSX。React 不提供 Vue 旧事件别名;业务逻辑应 迁移到类型化 callbacks。播放器行为、结构化错误和 WebView Bridge 事件保持一致。

回调的完整 payload 和触发语义见公共 API 与回调事件。特别注意 onReady 不是 metadata 事件,onPlay 在 buffering 恢复时可能再次调用,onTimeUpdate 的频率也可能 高于原生 timeupdate

React 版不包含 React Native SDK。原生应用应在 WebView 中使用本包,或自行把共享 Bridge 事件映射到宿主协议。