如何在 iOS 上使用 React Native 实现真正的 Picture-in-Picture (PiP)(在应用外,如 WhatsApp)?

发布: (2025年12月19日 GMT+8 21:05)
2 min read
原文: Dev.to

Source: Dev.to

当前行为

Android:
我通过自定义原生模块使用原生画中画(PiP),运行正常(视频在应用外部浮动)。

iOS:
我目前使用 react-native-pip-view,它仅在应用处于前台时有效。

问题

当 iOS 应用进入后台时:

  • 浮动的 PiP 界面消失
  • 视频停止渲染
  • 仅音频继续播放

然而,WhatsApp / FaceTime 等应用在 iOS 上会显示系统 PiP 窗口,位于应用外部。

我当前的技术栈

  • React Native
  • 基于 WebView 的视频(Jitsi Web / HTML / WebRTC 在 WebView 中)
  • react-native-pip-view(仅前台 PiP)
  • Android 上的原生 PiP 模块

我想了解的内容

  1. 在 React Native 中,是否可以在 iOS 上实现真正的系统画中画(在应用外部的浮动窗口)?
  2. iOS 的 PiP 能否与 WebView / HTML / Jitsi 视频一起使用,还是必须使用原生的 AVFoundation 视频渲染?
  3. 如果需要原生渲染:
    • 是否有使用 AVPictureInPictureController 的现有 React Native 库或示例?
    • 或者这是否需要完全原生的 WebRTC + AVSampleBufferDisplayLayer 实现?

提前感谢任何指导或参考资料。

Back to Blog

相关文章

阅读更多 »