如何使用Expo播放Youtube视频

Question

我正在尝试在我的expo项目中使用react-native-youtube组件。然而，我无法让它正常工作。到目前为止，我只能看到一个黑屏幕和红色边框。我尝试按照视频教程进行操作，但是由于expo没有iOS或Android文件夹，因此我无法在XCode中打开并进行调整。我应该如何使用expo播放YouTube视频？正如您从我的问题中所注意到的，我是新手，刚接触react-native和expo。

- NSCoder

---

Github问题：https://github.com/inProgress-team/react-native-youtube/issues/158 - reergymerej

对于仍在寻找的任何人，请尝试使用支持Expo的此软件包 - https://github.com/LonelyCpp/react-native-youtube-iframe - LonelyCpp

Answer 1

目前，Expo不支持YouTube。您可以将项目弹出并安装react-native-youtube库，或者像这样从WebView加载您的视频：

<WebView
    style={{flex:1}}
    javaScriptEnabled={true}
    source={{uri: 'https://www.youtube.com/embed/ZZ5LpwO-An4?rel=0&autoplay=0&showinfo=0&controls=0'}}
/>

- Agu Dondo

---

当用户导航到其他屏幕时，视频不会停止播放。 - yogeshhkumarr

@yogeshhkumarr，你需要移除/关闭webview。 - Joshua King

我使用了这种方法，但它被Google Play商店拒绝了，因为“通过启用YouTube视频的后台播放违反了设备和网络滥用政策。当YouTube视频正在播放时按下电源按钮可以观察到这一点。”然而，我无法在自己的设备上复现他们所描述的问题，所以可能是其他设备的问题（???）。无论如何，解决方案在这里描述：https://dev59.com/cVoV5IYBdhLWcg3wVdg_ - Clay

@Clay，当应用程序进入后台时，您可以暂停视频，请查看https://facebook.github.io/react-native/docs/appstate.html。 - Agu Dondo

在我的评论中，我链接了一个stackoverflow答案（你回答的），它是执行你建议的操作的说明。 - Clay

Answer 2

如果您仍在寻找相关内容，请尝试使用带有Expo支持的此软件包。

https://github.com/LonelyCpp/react-native-youtube-iframe

一个针对React Native构建的Youtube IFrame播放器API包装器。使用Webview播放器，与原生YouTube应用程序相比，更为稳定。

由于新的Expo SDK支持现代社区维护的Webview，因此它应该在各个平台上无缝工作。

- LonelyCpp

Answer 3

在React Native应用程序中获取YouTube视频的当前方法是在项目中使用React Native的WebView组件。

这里有一个示例，展示了如何使用WebView来模拟Instagram注册流程：https://snack.expo.io/HJRKKTmAx。

如果这不是您要寻找的内容，我很抱歉。

要使用react-native-youtube组件，您需要将Expo项目分离出来（使用ExpoKit）：

ExpoKit是一个Objective-C和Java库，允许您将Expo平台和现有的Expo项目作为更大的标准本机项目的一部分 - 通常您会使用Xcode、Android Studio或react-native init创建此类项目。

更多信息请参见：https://docs.expo.io/versions/v18.0.0/guides/detach.html

希望这两个选项能解决您的问题，如果有其他任何方式可以帮助您，请告诉我。

- Jim

---

当用户导航到其他屏幕时，视频不会停止播放。 - yogeshhkumarr

当组件卸载时，您必须销毁玩家以使其停止。 - Fernando Rojo

Answer 4

（仅适用于网站）
安装npm i react-player
基本使用

import ReactPlayer from 'react-player'

export default function App() {
  return (
    <ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />

  );
} 

Props = https://www.npmjs.com/package/react-player

翻译：属性= https://www.npmjs.com/package/react-player

- rafiulah

---

出现错误，div必须是一个函数...我觉得它在expo上无法运行。 - undefined