React Native/Android/iOS能否实现App全屏镜像投屏？求实现指引

可以实现，Android依赖系统自带的Miracast无线显示，iOS则用AirPlay镜像，这两个都是系统级功能，React Native可以通过封装原生API或适配第三方库来对接。

Android 实现步骤 #

方式一：封装原生系统API #

1. 检查投屏支持
   在Android原生模块中通过MediaRouter判断是否有可用投屏设备：

   MediaRouter mediaRouter = (MediaRouter) getApplicationContext().getSystemService(Context.MEDIA_ROUTER_SERVICE);
   MediaRouter.RouteInfo activeRoute = mediaRouter.getSelectedRoute(MediaRouter.ROUTE_TYPE_LIVE_VIDEO);
   boolean hasAvailableCasts = activeRoute != null && activeRoute.getType() == MediaRouter.RouteInfo.TYPE_REMOTE_DISPLAY;
   

2. 唤起系统投屏选择界面
   调用系统Intent打开投屏设置弹窗，用户选择设备后系统自动完成镜像：

   Intent castIntent = new Intent("android.settings.CAST_SETTINGS");
   castIntent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
   startActivity(castIntent);
   

3. 桥接到React Native
   创建Native Module把上述方法暴露给JS层：

   import { NativeModules } from 'react-native';
   const { ScreenCastModule } = NativeModules;
   
   // 检查是否支持投屏
   const checkCastSupport = async () => {
     const isSupported = await ScreenCastModule.checkCastSupport();
     console.log("投屏支持状态：", isSupported);
   };
   
   // 打开系统投屏选择
   const openCastSettings = () => {
     ScreenCastModule.openCastSettings();
   };
   

方式二：使用第三方适配库 #

可以用react-native-screen-cast（专门针对屏幕镜像，不是媒体流），安装后直接调用：

npm install react-native-screen-cast --save

import ScreenCast from 'react-native-screen-cast';

// 启动投屏选择流程
ScreenCast.startScreenCast();

iOS 实现步骤 #

iOS的AirPlay镜像由系统原生支持，只需对接系统API唤起选择界面：

1. 封装原生AirPlay控制器
   在iOS原生模块中用MPVolumeView唤起AirPlay选择按钮，系统自动处理镜像逻辑：

   import MediaPlayer
   import React
   
   @objc(ScreenCastModule)
   class ScreenCastModule: NSObject, RCTBridgeModule {
     static func moduleName() -> String {
       return "ScreenCastModule"
     }
   
     @objc func showAirPlayPicker() {
       DispatchQueue.main.async {
         let volumeView = MPVolumeView()
         volumeView.showsRouteButton = true
         volumeView.sizeToFit()
         // 可以将按钮添加到自定义视图，或让系统直接唤起弹窗
         UIApplication.shared.keyWindow?.addSubview(volumeView)
       }
     }
   }
   

2. React Native端调用

   import { NativeModules } from 'react-native';
   const { ScreenCastModule } = NativeModules;
   
   // 唤起AirPlay选择面板
   const showAirPlayPicker = () => {
     ScreenCastModule.showAirPlayPicker();
   };
   

3. 权限配置
   在Info.plist中添加AirPlay相关权限，确保设备能搜索到投屏目标：

   <key>NSBonjourServices</key>
   <array>
     <string>_airplay._tcp</string>
     <string>_raop._tcp</string>
   </array>
   

注意事项 #

• Android设备需支持Miracast（Android 4.2及以上基本都支持），iOS需支持AirPlay（iOS 5+）。
• 投屏设备和手机必须在同一局域网内。
• 不要用仅支持媒体流的库（比如你试过的那两个），系统级投屏才是全屏镜像的核心。

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