RN如何在Android双屏设备上实现启动时分屏加载不同页面

一、Android原生层配置与实现 #

1. 配置权限并检测双屏 #

首先在AndroidManifest.xml中添加必要权限：

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />

然后在原生代码中获取双屏的Display实例：

val displayManager = getSystemService(Context.DISPLAY_SERVICE) as DisplayManager
val displays = displayManager.displays
// displays[0]为主屏，displays[1]为副屏（设备支持双屏时存在）
val secondaryDisplay = if (displays.size > 1) displays[1] else null

2. 为双屏创建独立加载容器 #

方式1：双Activity方案（推荐，RN集成更简洁）

• 为主屏创建默认MainActivity，继承ReactActivity，负责加载RN主页面：

class MainActivity : ReactActivity() {
    override fun getMainComponentName(): String? {
        return "HomeScreen"
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // 启动副屏Activity并指定显示在副屏
        val displayManager = getSystemService(Context.DISPLAY_SERVICE) as DisplayManager
        val displays = displayManager.displays
        if (displays.size > 1) {
            val intent = Intent(this, SecondaryActivity::class.java)
            val options = ActivityOptions.makeBasic()
            options.launchDisplayId = displays[1].displayId
            startActivity(intent, options.toBundle())
        }
    }
}

• 为副屏创建SecondaryActivity，同样继承ReactActivity，加载RN副屏页面：

class SecondaryActivity : ReactActivity() {
    override fun getMainComponentName(): String? {
        return "SecondaryScreen"
    }
}

• 在AndroidManifest.xml中注册SecondaryActivity，配置全屏主题：

<activity
    android:name=".SecondaryActivity"
    android:theme="@style/Theme.App.Fullscreen"
    android:launchMode="singleInstance" />

方式2：单Activity双Window方案

若不想用双Activity，可在MainActivity中为副屏创建独立Window：

private fun initSecondaryWindow(display: Display) {
    val windowManager = getSystemService(WINDOW_SERVICE) as WindowManager
    val params = WindowManager.LayoutParams().apply {
        width = WindowManager.LayoutParams.MATCH_PARENT
        height = WindowManager.LayoutParams.MATCH_PARENT
        displayId = display.displayId
        type = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY
        } else {
            WindowManager.LayoutParams.TYPE_SYSTEM_ALERT
        }
        flags = WindowManager.LayoutParams.FLAG_FULLSCREEN or WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL
    }
    val reactRootView = ReactRootView(this)
    val reactInstanceManager = (application as ReactApplication).reactNativeHost.reactInstanceManager
    reactRootView.startReactApplication(reactInstanceManager, "SecondaryScreen", null)
    windowManager.addView(reactRootView, params)
}

需注意在Activity销毁时移除副屏Window，避免内存泄漏。

二、React Native层配置 #

在index.js中注册两个独立RN页面组件：

import { AppRegistry } from 'react-native';
import HomeScreen from './src/screens/HomeScreen';
import SecondaryScreen from './src/screens/SecondaryScreen';

AppRegistry.registerComponent('HomeScreen', () => HomeScreen);
AppRegistry.registerComponent('SecondaryScreen', () => SecondaryScreen);

三、注意事项 #

• 部分厂商双屏设备有特殊限制，需参考厂商适配文档确保副屏内容正常显示。
• 同步处理双屏容器的生命周期，比如主屏销毁时关闭副屏Activity/Window。
• 必须在真实双屏设备上测试，模拟器无法完整模拟双屏场景。

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