React Native 中实现画中画 (PIP) 模式的解决方案

本文档旨在提供在 React Native 应用中实现画中画 (PIP) 模式的实用指南。重点解决在 PIP 模式下，由于应用进入后台状态导致的 UI 更新问题。通过结合 HeadlessJS 任务和一些技巧性的代码，可以使 React Native 应用在 PIP 模式下保持数据的实时更新和 UI 的响应。

在 React Native 应用中实现画中画 (PIP) 模式，尤其是在 PIP 模式下需要实时更新数据（例如每秒更新时间）时，会遇到一些挑战。主要问题在于，当 Android 应用进入 PIP 模式时，onPause 函数会被调用，这会导致 React Native 的 UI 更新受到限制。

问题分析

Android 系统在进入 PIP 模式后，建议在 onPause 函数中继续视频播放。对于原生 Android 视图来说，它们可以忽略 Activity 的状态，即使应用暂停或进入后台，也能继续更新。但是，React Native 的 UI 更新，特别是那些没有使用 HeadlessJS 的部分，在应用进入后台后，其运行的可靠性会大大降低，甚至可能无法运行。这导致状态无法更新，UI 变成静态图像。

解决方案

为了解决这个问题，可以采用以下两种策略：

1. 使用 HeadlessJS 任务更新数据： 将数据更新操作放在 HeadlessJS 任务中执行。
2. 触发 React Native UI 重新渲染： 通过某种方式触发 React Native UI 的重新渲染。

具体实现

1. HeadlessJS 任务

首先，需要创建一个 HeadlessJS 任务来处理数据的更新。这可以确保即使应用进入后台，数据也能持续更新。

• 注册 Headless 任务： 在应用的入口文件（通常是 index.js 或 App.js）中，使用 AppRegistry.registerHeadlessTask 注册 Headless 任务。

  

  可画AI

  Canva可画魔力工作室，一站式AI智能设计工具平台

  158

  查看详情

  import { AppRegistry } from 'react-native';
  
  AppRegistry.registerHeadlessTask('DataUpdateTask', () => async (data) => {
    // 在这里执行数据更新逻辑
    console.log('Updating data in HeadlessJS task:', data);
    // 示例：每秒更新时间
    setInterval(() => {
      const currentTime = new Date().toLocaleTimeString();
      console.log('Current time:', currentTime);
      // 在这里将更新后的数据发送到zustand store或其他状态管理方案
    }, 1000);
  });

  登录后复制

• 触发 Headless 任务： 在 MainActivity 的 onPictureInPictureModeChanged 方法中，通过 ReactContext 触发 Headless 任务。

  import com.facebook.react.bridge.ReactContext;
  import com.facebook.react.modules.core.DeviceEventManagerModule;
  
  @Override
  public void onPictureInPictureModeChanged(boolean isInPictureInPictureMode) {
    super.onPictureInPictureModeChanged(isInPictureInPictureMode);
    ReactContext reactContext = getReactInstanceManager().getCurrentReactContext();
    if (reactContext != null) {
      reactContext
          .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
          .emit("onPictureInPictureModeChanged", isInPictureInPictureMode);
  
      // 触发 Headless 任务
      if (isInPictureInPictureMode) {
          WritableNativeMap params = Arguments.createMap();
          params.putString("message", "PIP Mode Entered");
          HeadlessJsTaskConfig taskConfig = new HeadlessJsTaskConfig(
              "DataUpdateTask", // Headless 任务名称
              params,
              5000, // 超时时间
              true // 是否允许在电池优化模式下运行
          );
          HeadlessJsTaskService.acquireWakeLockNow(this);
          getReactNativeHost().getReactInstanceManager().getCurrentReactContext().getJSModule(HeadlessJsTaskModule.class).runHeadlessTask(taskConfig);
      }
    }
  }

  登录后复制

• 监听 PIP 模式变化： 在 React Native 代码中，通过事件监听器监听 onPictureInPictureModeChanged 事件，并根据 PIP 模式的状态执行相应的操作。 注意： 这个监听器需要通过 AppRegistry.registerHeadlessTask 注册，才能在后台可靠地执行。

  import { AppRegistry, NativeEventEmitter, Platform } from 'react-native';
  import { useEffect } from 'react';
  
  const setupPIPListener = () => {
    if (Platform.OS === 'android') {
      const eventEmitter = new NativeEventEmitter();
  
      eventEmitter.addListener('onPictureInPictureModeChanged', (isInPipMode) => {
        console.log('PIP Mode Changed:', isInPipMode);
        // 根据 PIP 模式的状态执行相应的操作
      });
    }
  };
  
  AppRegistry.registerHeadlessTask('PIPModeListener', () => setupPIPListener);
  
  const App = () => {
    useEffect(() => {
      if (Platform.OS === 'android') {
        AppRegistry.registerHeadlessTask('PIPModeListener', () => setupPIPListener);
        AppRegistry.startHeadlessTask('PIPModeListener', {}, 1);
      }
    }, []);
  
    return (
      // Your App Content
    );
  };
  
  export default App;

  登录后复制

2. 触发 UI 重新渲染

由于 React Native 的 UI 在 PIP 模式下可能无法自动更新，需要手动触发 UI 的重新渲染。一个比较直接的方法是在 MainActivity 的 onPause 函数中，立即调用 onResume 函数，以强制 React Native 恢复到前台状态。

@Override
public void onPause() {
  // If called while in PiP mode, do not pause playback
  super.onPause();
  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
    if (isInPictureInPictureMode()) {
      this.onResume(); // <--- this
      // Continue playback
    } else {
      // Use existing playback logic for paused Activity behavior.
    }
  } else {

  }
}

注意事项

• HeadlessJS 任务的限制： HeadlessJS 任务主要用于执行后台任务，不适合直接操作 UI。因此，需要在 HeadlessJS 任务中更新数据，然后通过某种方式将更新后的数据传递给 React Native 的 UI 组件。可以使用 Zustand、Redux 等状态管理工具来实现数据的共享。
• onResume 的副作用： 直接调用 onResume 可能会导致一些副作用，例如 Activity 的生命周期可能会被打乱。需要仔细测试，确保这种方法不会对应用的稳定性产生负面影响。
• 权限： 确保应用具有进入 PIP 模式的权限。需要在 AndroidManifest.xml 文件中声明 android:supportsPictureInPicture="true" 属性，并在代码中检查和请求相应的权限。

总结

在 React Native 应用中实现 PIP 模式，需要结合 HeadlessJS 任务和一些技巧性的代码。通过将数据更新操作放在 HeadlessJS 任务中执行，并手动触发 UI 的重新渲染，可以使 React Native 应用在 PIP 模式下保持数据的实时更新和 UI 的响应。

免责声明： 以上解决方案仅供参考，可能需要根据具体的应用场景进行调整。在生产环境中使用之前，请务必进行充分的测试。

以上就是React Native 中实现画中画 (PIP) 模式的解决方案的详细内容，更多请关注php中文网其它相关文章！