React Native TypeScript应用中react-native-youtube组件报错求助

问题描述 #

在React Native TypeScript移动端应用中使用react-native-youtube组件时持续报错，已尝试安装deprecated-react-native-prop-types、metro-react-native-babel-preset等依赖包，但问题未解决。已在谷歌云平台（GCP）启用YouTube Embedded Player API并创建了API Key，当前在Android Studio模拟器本地运行应用，且使用了所有最新版本的包。

组件代码：

<YouTube
    apiKey = "API KEY HERE"
    videoId = "KVZ-P-ZI6W4"
    play = {true}
    fullscreen = {false}
    loop = {false}
    onReady={(e): void => { console.log(e); }}
    onChangeState={(): void => { console.log(); }}
    onChangeQuality={(): void => { console.log(); }}
    onError={(e): void => { console.log(e); }}
    style={{ alignSelf: 'stretch', height: 300 }}
/>

onError回调返回的错误对象：

{"error": "SERVICE_MISSING", "target": 235}

弹出的错误提示：

获取YouTube应用：

此应用无法运行，因为您的设备上缺少YouTube应用。

错误原因 #

react-native-youtube组件底层依赖Android设备上的官方YouTube应用提供播放服务，而Android Studio默认模拟器镜像未预装该应用，因此触发SERVICE_MISSING错误。

解决方案 #

方案1：给模拟器安装YouTube应用

• 确保使用的Android模拟器镜像带有Google Play服务（创建模拟器时选择带「Google Play」标的系统镜像）
• 启动模拟器，打开Google Play商店
• 搜索并安装官方「YouTube」应用
• 安装完成后重启React Native应用，重新测试播放器

方案2：改用不依赖YouTube应用的播放方案

如果不想依赖设备上的YouTube应用，推荐使用react-native-webview嵌入YouTube网页播放器，无需API Key，兼容性更强：

import WebView from 'react-native-webview';

// 在组件中使用
<WebView
  style={{ alignSelf: 'stretch', height: 300 }}
  source={{
    uri: `https://www.youtube.com/embed/KVZ-P-ZI6W4?autoplay=1&loop=0`,
  }}
  allowsInlineMediaPlayback={true}
  mediaPlaybackRequiresUserAction={false}
/>

额外检查项

• 确认GCP中启用的是YouTube Data API v3（react-native-youtube实际依赖该API，而非Embedded Player API）
• 检查模拟器的Google Play服务是否为最新版本，避免版本兼容问题

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