@12stonechurch/react-native-chromecast 中文文档教程

Question

react-native-googlecast-v3

Google Cast SDK v3 支持 React-Native

CAVEATS!

• Only Android at the moment, iOS to come.
• Only supports talking to your custom receiver thru a custom channel at the moment, so the default use-case of playing some media is currently NOT supported. Sorry, but this is what I needed today.

Installation

npm install --save https://github.com/mtkopone/react-native-googlecast-v3
react-native link

或者，你知道，如果这就是我们本周都在使用的东西，那么在 yarn 中也是一样的……

Configuration for Android

将所需的依赖项添加到 ./android/app/build.gradle

dependencies {
  compile project(':react-native-googlecast-v3')
  compile "com.android.support:appcompat-v7:23.0.1"
  compile 'com.android.support:mediarouter-v7:23.0.1'
  compile "com.google.android.gms:play-services-cast-framework:11.8.0"
  ... // And so on
}

：确保 appcompat 和 mediarouter 依赖项的版本与您的 compileSdkVersion 匹配。

在 ./android/app/src/main/AndroidManifest.xml 的 元素中添加以下内容：

<meta-data
  android:name="com.google.android.gms.cast.framework.OPTIONS_PROVIDER_CLASS_NAME"
  android:value="com.reactnativegooglecastv3.CastOptionsProvider" />
<meta-data
  android:name="com.reactnativegooglecastv3.castAppId"
  android:value="YOUR_APP_ID" />
<meta-data
  android:name="com.reactnativegooglecastv3.castNamespace"
  android:value="urn:x-cast:your.own.namespace" />

更新您的 ./android/app /src/main/java/your.package/MainActivity.java 扩展 com.facebook.react.ReactFragmentActivity

更新你的 ./android/app/src/main/java /你的.package/MainApplication.java, 覆盖 onCreate，并添加 CastManager 初始化：

  @Override
  public void onCreate() {
    super.onCreate();
    com.reactnativegooglecastv3.CastManager.init(this);
  }

Usage

Import

import CastButton, { GoogleCastV3 } from 'react-native-googlecast-v3'

GoogleCastV3.appId // is your castAppId
GoogleCastV3.namespace // is your castNamespace

Render the Cast button

CastButton 将根据投射设备可用性出现和消失，并显示当前连接状态：

<View>
  <CastButton color="#f00 (optional)" />
</View>

要触发显示来自另一个组件的设备模式，保存对 CastButton 的引用，然后调用 click () on it:

// render:
<CastButton ref={c => this.myCastButton = c } ... />

// elsewhere in your component
this.myCastButton.click()

Get information about the currently connected device

 GoogleCastV3.getCurrentDevice().then(device => {
    // device: null || { id, model, name, version }
 })

Send messages to a connected Cast device

Using the namespace declared in your AndroidManifest.xml:

GoogleCastV3.send('WHADDUP')

Using some other namespace:

GoogleCastV3.send('urn:x-cast:some.other.namespace', 'WHADDUP')

Listen to things

GoogleCastV3.addCastStateListener(state => {
  // state is one of: GoogleCastV3.{NO_DEVICES_AVAILABLE, NOT_CONNECTED, CONNECTING or CONNECTED}
})

GoogleCastV3.addCastMessageListener(message => {
  // message is: { namespace: 'urn:x-cast:your.own.namespace', message: String }
})