如何在 Expo 上启用全屏按钮嵌入 YouTube 视频？答案

【问题标题】：How to embed YouTube video with a full screen button enabled on Expo?如何在 Expo 上启用全屏按钮嵌入 YouTube 视频？
【发布时间】：2019-05-18 03:50:51
【问题描述】：

到目前为止，我尝试了所有可用的方法，除了那些我必须从 Expo 中弹出我的应用程序的方法。我无法尝试“react-native-youtube”，因为它要求我退出世博会。我也尝试了“react-native-android-fullscreen-webview-video”，但它似乎也需要弹出，尽管它没有明确提及。

我只是尝试使用 react native 嵌入 YouTube

chooseVideo = () => {
        const re = /https?:\/\/(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube(?:-nocookie)?\.com\S*?[^\w\s-])([\w-]{11})(?=[^\w-]|$)(?![?=&+%\w.-]*(?:['"][^<>]*>|<\/a>))[?=&+%\w.-]*/ig;
        const embedVideo = this.state.url.replace(re, 'https://www.youtube.com/embed/$1?modestbranding=1&loop=1&playlist=$1&showinfo=0');

...

<WebView
    style={{width: '100%', height: undefined, aspectRatio: 16 / 9}}
    javaScriptEnabled={true}
    source={{uri: this.props.video}}
/>

它显示了一个全屏按钮，但它被禁用了，所以我无法按下它。

我也尝试过使用 iframe。它没有用。

<WebView
        style={{width: '100%', height: undefined, aspectRatio: 16 / 9}}
        javaScriptEnabled={true}
        source={{ html: "<html><body><iframe width="560" height="315" src=https://www.youtube.com/embed/'" + this.props.videoId + "' frameBorder='0' allowFullScreen='allowFullScreen'></iframe></body></html>"}}
/>

iframe 也不起作用。

我正在使用 Expo 在 Android 平台上进行测试。

【问题讨论】：

同样的问题？：forums.expo.io/t/… 现有问题票：expo.canny.io/feature-requests/p/react-native-youtube
@Morrison Chang 是的。那么我唯一能做的就是等待吗？
最大的能力是在本机框架（Java/Kotlin 或 Swift/ObjC）中编写，即使这样也有限制。使用第三方框架会增加更多。除非您能够修改 Expo 来做您想做的事，否则您只能等待（但请注意门票已打开多长时间）。

标签： android react-native expo

【解决方案1】：

您可以使用与 Expo 兼容的 React Native Youtube Iframe。

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

视频播放器有一个全屏按钮。

一些限制：

如果你想触发副作用，有an open issue关于在iOS上监听全屏请求。图书馆所有者请求了一些帮助。
现在可以在启动时强制全屏显示。

如果您需要解决这些问题的方法，您可以查看这个建议改为全屏查看的答案：https://stackoverflow.com/a/64188272/9927519

【讨论】：