当前位置：首页 > news >正文

如何快速集成React Native Google Cast？从安装到第一个投屏功能的完整指南

news 2026/7/30 19:09:33

如何快速集成React Native Google Cast？从安装到第一个投屏功能的完整指南

【免费下载链接】react-native-google-castReact Native wrapper for the Google Cast SDK项目地址: https://gitcode.com/gh_mirrors/re/react-native-google-cast

React Native Google Cast是一个强大的库，它作为Google Cast SDK的React Native封装器，让开发者能够轻松地在React Native应用中集成投屏功能。本指南将为你提供从安装到实现第一个投屏功能的完整步骤，帮助你快速掌握React Native Google Cast的使用方法。

图：React Native Google Cast Logo，代表着强大的投屏功能集成能力

快速安装React Native Google Cast的步骤

使用npm或yarn安装核心依赖

集成React Native Google Cast的第一步是安装核心依赖包。打开你的终端，在项目根目录下执行以下命令：

$ npm install react-native-google-cast --save

或者如果你使用yarn作为包管理器，可以执行：

$ yarn add react-native-google-cast

这将把React Native Google Cast库添加到你的项目中，为后续的功能实现打下基础。

Expo项目的专属配置

如果你是使用Expo开发应用，那么集成React Native Google Cast会更加简单。由于Expo SDK 42及以上版本支持自定义原生代码，你可以直接使用项目中包含的配置插件。

首先，在你的app.json或app.config.js/ts文件的plugins数组中添加以下配置：

{ "expo": { "plugins": ["react-native-google-cast"] } }

添加完成后，你需要重新构建你的应用。按照Expo的"Adding custom native code"指南进行操作，完成后就可以继续进行后续的设置步骤了。

iOS平台的额外设置

对于iOS平台，除了上述的基础安装外，还需要进行一些额外的配置。

首先，在AppDelegate.swift（或AppDelegate.mm）文件中添加Google Cast的初始化代码。在文件顶部导入GoogleCast：

import GoogleCast

然后在application:didFinishLaunchingWithOptions方法中添加以下代码：

let receiverAppID = kGCKDefaultMediaReceiverApplicationID let criteria = GCKDiscoveryCriteria(applicationID: receiverAppID) let options = GCKCastOptions(discoveryCriteria: criteria) GCKCastContext.setSharedInstanceWith(options)

接下来，需要在Info.plist文件中添加本地网络权限。打开Info.plist，添加以下内容：

<key>NSBonjourServices</key> <array> <string>_googlecast._tcp</string> <string>_CC1AD845._googlecast._tcp</string> </array> <key>NSLocalNetworkUsageDescription</key> <string>${PRODUCT_NAME} uses the local network to discover Cast-enabled devices on your WiFi network.</string>

这些配置将确保你的应用能够发现并连接到本地网络中的Cast设备。

Android平台的必要配置

Android平台同样需要一些额外的设置才能正常使用React Native Google Cast。

首先，在android/app/build.gradle文件中添加Google Cast SDK依赖：

dependencies { // ... implementation "com.google.android.gms:play-services-cast-framework:+" }

然后，在AndroidManifest.xml（位于android/app/src/main目录下）中添加以下元数据：

<application ...> ... <meta-data android:name="com.google.android.gms.cast.framework.OPTIONS_PROVIDER_CLASS_NAME" android:value="com.reactnative.googlecast.GoogleCastOptionsProvider" /> </application>

最后，在你的MainActivity.kt或MainActivity.java中初始化CastContext。以Kotlin为例：

import com.reactnative.googlecast.api.RNGCCastContext class MainActivity : ReactActivity() { // ... override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) RNGCCastContext.getSharedInstance(this) } }

这些步骤完成后，Android平台的配置就基本完成了。

实现你的第一个投屏功能

添加Cast按钮组件

完成了所有的安装和配置步骤后，现在可以开始实现投屏功能了。首先，我们需要在应用中添加一个Cast按钮，让用户能够选择并连接到Cast设备。

在你的React Native组件中，导入CastButton组件：

import { CastButton } from 'react-native-google-cast'

然后在你的渲染方法中添加这个按钮：

return <CastButton style={{ width: 24, height: 24, tintColor: 'black' }} />

这个按钮会自动处理设备发现和连接过程。当用户点击按钮时，会弹出一个对话框让用户选择要连接的Cast设备。

使用useRemoteMediaClient钩子加载媒体

连接到Cast设备后，我们需要使用useRemoteMediaClient钩子来获取远程媒体客户端，并加载媒体内容。

首先，导入useRemoteMediaClient钩子：

import { useRemoteMediaClient } from 'react-native-google-cast'

然后在你的组件中使用这个钩子：

function MyComponent() { const client = useRemoteMediaClient() if (client) { // 当连接到设备后，可以调用loadMedia方法来投屏媒体 client.loadMedia({ mediaInfo: { contentUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4', contentType: 'video/mp4', }, }) } return <CastButton style={{ width: 24, height: 24, tintColor: 'black' }} /> }

这段代码会在用户连接到Cast设备后，自动开始播放指定的视频。当然，在实际应用中，你可能希望在用户点击某个视频后再调用loadMedia方法。

自定义媒体信息

你还可以提供更多的媒体信息，使投屏体验更加丰富。例如，你可以添加视频的标题、副标题、缩略图等：

client.loadMedia({ mediaInfo: { contentUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4', contentType: 'video/mp4', metadata: { images: [ { url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/images/480x270/BigBuckBunny.jpg', }, ], title: 'Big Buck Bunny', subtitle: 'A large and lovable rabbit deals with three tiny bullies...', studio: 'Blender Foundation', type: 'movie', }, streamDuration: 596, // 视频时长（秒） }, startTime: 10, // 从第10秒开始播放 })

通过这些自定义信息，你的投屏内容将在Cast设备上显示更加丰富的元数据，提升用户体验。

处理Android平台的Google Play服务问题

在Android设备上，你可能会遇到Google Play服务缺失的问题。为了确保应用的稳定性，你可以添加以下代码来检查并处理这个问题：

import { CastContext, PlayServicesState } from 'react-native-google-cast' CastContext.getPlayServicesState().then((state) => { if (state && state !== PlayServicesState.SUCCESS) CastContext.showPlayServicesErrorDialog(state) })

这段代码会检查Google Play服务的状态，如果发现问题，会显示一个对话框，提示用户安装或更新Google Play服务。