iOS端React Native应用如何独立集成画中画（PiP）功能

前置依赖配置 #

• 确保项目iOS最低支持版本为iOS 14及以上，更低版本系统不提供原生PiP能力
• Xcode权限配置：打开项目ios目录下的xcworkspace工程，进入Signing & Capabilities标签，添加Background Modes能力，勾选其中的Audio, AirPlay, and Picture in Picture选项
• 音频会话配置：在AppDelegate的启动方法中添加音频会话配置，保证退后台后音视频正常播放：

#import <AVFoundation/AVFoundation.h>

// 在didFinishLaunchingWithOptions方法内插入以下代码
AVAudioSession *audioSession = [AVAudioSession sharedInstance];
[audioSession setCategory:AVAudioSessionCategoryPlayback error:nil];
[audioSession setActive:YES error:nil];

独立集成方案（不绑定react-native-video组件） #

你可以根据项目需求选择以下两种方案，都可以和你当前使用的任意视频模块适配：

方案1：使用独立第三方PiP组件 #

现在有多个不耦合视频播放组件的轻量RN PiP开源库，核心能力就是单独提供PiP容器管理，支持将任意视频组件的渲染图层挂载到PiP窗口中：

• 组件已封装好原生层的PiP逻辑，桥接了startPictureInPicture()、stopPictureInPicture()等直接调用的JS方法
• 提供PiP状态回调，包括开启成功、开启失败、用户主动关闭、用户点击恢复全窗口等事件，你可以根据回调同步自己项目中视频模块的播放状态、UI展示逻辑
• 不需要修改现有视频组件的内部实现，只需要将视频实例的图层ID传入PiP组件即可完成绑定

方案2：自定义原生桥接实现 #

如果需要高度定制PiP的样式、交互逻辑，可以自己封装原生PiP能力桥接到RN侧：

1. iOS原生层基于系统AVPictureInPictureController类创建PiP控制器，绑定你当前使用的视频模块的播放图层（支持AVPlayerLayer、AVSampleBufferDisplayLayer两种系统标准渲染图层）
2. 通过React Native的原生模块桥接能力，将PiP的启动、关闭等方法暴露给JS层调用
3. 原生层监听AVPictureInPictureControllerDelegate的所有状态回调，通过RCTEventEmitter发送到JS层，用于业务侧的逻辑处理

常见适配注意点 #

• 如果你使用的视频模块是自定义渲染而非系统标准图层，需要先将渲染内容转成系统支持的图层格式，否则无法正常挂载到PiP窗口
• PiP开启后不要停止视频的播放线程、音频输出，否则系统会自动关闭PiP窗口
• 适配用户从PiP恢复到APP的场景，需要同步视频的播放进度、倍速、播放状态等参数，保证前后状态一致

内容的提问来源于stack exchange，提问作者Zephyr