React Native按下Home键无法正常显示PiP画中画视频该如何实现？

1. 解决唤起PiP后无法返回React Native视图问题 #

第一步：配置AndroidManifest.xml #

给PiPVideoActivity添加PiP支持属性，避免生命周期异常：

<activity
    android:name=".PiPVideoActivity"
    android:supportsPictureInPicture="true"
    android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation"
    android:resizeableActivity="true"
    android:launchMode="singleTop"
    android:exported="false" />

第二步：添加PiP返回逻辑 #

在PiPVideoActivity中添加点击PiP窗口、退出PiP模式时的返回逻辑，关闭当前Activity自动回到RN视图：

// 加到PiPVideoActivity类中
@Override
public void onPictureInPictureModeChanged(boolean isInPictureInPictureMode, Configuration newConfig) {
    super.onPictureInPictureModeChanged(isInPictureInPictureMode, newConfig);
    // 退出PiP模式时直接关闭当前Activity
    if (!isInPictureInPictureMode) {
        finish();
    }
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    // 点击PiP窗口时关闭页面返回RN
    if (event.getAction() == MotionEvent.ACTION_UP) {
        finish();
    }
    return super.onTouchEvent(event);
}

2. 解决按下Home键时PiP无法正常弹出问题 #

第一步：调整PiP触发时机 #

你当前在onCreate中直接调用enterPictureInPictureMode，容易因Activity未完成加载导致调用失效，将触发逻辑移到视频准备完成的回调中：

// 修改PiPVideoActivity的PlayVideo方法里的onPrepared回调
myVideoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
    @RequiresApi(api = Build.VERSION_CODES.O)
    public void onPrepared(MediaPlayer mp) {
        myVideoView.seekTo(videoDuration);
        myVideoView.start();
        // 视频准备完成后再进入PiP模式
        PictureInPictureParams params = new PictureInPictureParams
                .Builder()
                .setAspectRatio(new Rational(1,1))
                .build();
        enterPictureInPictureMode(params);
    }
});

记得删掉原来onCreate里的enterPictureInPictureMode相关代码。

第二步：监听App切后台事件触发PiP #

普通应用无法直接拦截Home键点击事件，通过RN的AppState监听应用切后台事件触发PiP即可：

import { NativeModules, AppState, useEffect } from 'react-native'
const pipVideo = NativeModules.PiPModule;

// 在你的视频播放组件中添加监听
useEffect(() => {
  const appStateListener = AppState.addEventListener('change', (nextState) => {
    if (nextState === 'background') {
      // 切后台时触发PiP
      pipVideo.showPiPVideo(videoURL, Math.floor(currentTime) * 1000);
    }
  })
  // 组件卸载时移除监听
  return () => appStateListener.remove()
}, [currentTime, videoURL])

内容的提问来源于stack exchange，提问作者Aung Thura Moe