如何在React Native中实现Android应用最小化后悬浮显示在屏幕上层

这个效果是依托Android系统的悬浮窗权限实现的，仅支持Android平台，iOS受系统沙箱限制无法实现跨应用全局悬浮效果，具体实现步骤如下： #

1. 配置基础权限 #

在android/app/src/main/AndroidManifest.xml中添加悬浮窗相关权限：

<!-- 基础悬浮窗权限 -->
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
<!-- 安卓10及以上后台弹出界面权限 -->
<uses-permission android:name="android.permission.ACTION_MANAGE_OVERLAY_PERMISSION" />
<!-- 安卓12及以上悬浮窗适配权限 -->
<uses-permission android:name="android.permission.SYSTEM_APPLICATION_OVERLAY" />

2. 动态申请权限 #

安卓6.0及以上版本需要用户手动授权悬浮窗权限，应用启动后先判断权限状态，未授权则引导用户跳转设置页开启：

import { PermissionsAndroid, Linking, Platform, Build, Settings } from 'react-native';

const checkFloatPermission = async () => {
  if (Platform.OS !== 'android') return true;
  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    const hasPermission = await Settings.canDrawOverlays();
    if (!hasPermission) {
      // 跳转到应用设置页，也可以通过原生Intent直接跳转到悬浮窗专属授权页
      Linking.openSettings();
      return false;
    }
  }
  return true;
}

3. 实现悬浮窗逻辑 #

有两种常用实现路径，可根据需求选择：

方案A：使用第三方封装库（无需写原生代码） #

推荐使用react-native-float-window类社区封装库，已经实现了悬浮窗创建、拖拽吸附、点击交互、显隐控制等通用逻辑，接入成本极低，核心调用示例：

import FloatWindow from 'react-native-float-window';

// 授权通过后调用创建悬浮窗
const createFloatWindow = () => {
  FloatWindow.show({
    width: 80,
    height: 80,
    initialX: 20,
    initialY: 300,
    draggable: true, // 支持拖拽
    autoAdsorbEdge: true, // 松手后自动吸附到屏幕边缘
    renderContent: () => <YourCustomFloatComponent />, // 自定义悬浮窗渲染内容
    onTap: () => {
      // 点击悬浮窗的回调逻辑，比如打开应用主界面
    }
  });
}

// 不需要显示时调用隐藏
// FloatWindow.hide();

方案B：自定义原生模块（适合高度定制场景） #

如果有特殊交互需求，可自行编写Android原生逻辑实现：

1. 原生层创建WindowManager实例，配置悬浮窗参数，将LayoutParams.type设置为TYPE_APPLICATION_OVERLAY（安卓8及以上适配）
2. 实现悬浮窗的触摸、拖拽、点击事件逻辑
3. 通过React Native原生桥接能力，实现JS层和原生悬浮窗的事件通信、内容更新

注意事项 #

• 不同安卓版本的权限规则差异较大，需要针对安卓6、8、10、12几个节点做版本兼容
• 悬浮窗默认不依赖应用前台状态，退到后台、打开其他应用时都可以正常显示，除非用户手动关闭权限或者杀掉应用进程
• 注意处理悬浮窗和系统导航栏、状态栏的显示冲突，避免被系统UI遮挡

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