如何使用 Expo 播放 Youtube 视频

Question

我正在尝试使用 react-native-youtube component in my expo project. However, I couldn't get it to work. All I have so far is a black screen with red borders. I tried following the video instructions on online 但是，expo 没有 iOS 或 Android 文件夹，这意味着我无法在 XCode 和 fiddle 。如何使用 expo 播放 youtube 视频？正如您可能已经从我的问题中注意到的那样，我是使用 expo 的 react-native 的新手。

Answer 1

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

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

如果这不是您要找的，我很抱歉:(

要使用 react-native-youtube 组件，您必须分离您的 Expo 项目 ExpoKit：

ExpoKit is an Objective-C and Java library that allows you to use the Expo platform and your existing Expo project as part of a larger standard native project — one that you would normally create using Xcode, Android Studio, or react-native init.

这里有更多信息：https://docs.expo.io/versions/v18.0.0/guides/detach.html

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

Answer 2

目前，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'}}
/>

Answer 3

对于仍在寻找此内容的任何人，请尝试使用带有 expo 支持的程序包

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

A wrapper of the Youtube IFrame player API build for react native. Uses the webview player which is known to be more stable compared to the native youtube app.

由于新的 expo SDK 支持现代社区维护的 webview，它应该可以跨平台无缝工作

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' />

  );
}

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

如何使用 Expo 播放 Youtube 视频

How to play Youtube videos using Expo

youtube

ios

react-native

expo