react-native webview 嵌入 youtube 视频在 Android 中没有全屏选项 [英] react-native webview embed youtube video doesn't have fullscreen options in Android

问题描述

我正在尝试将 youtube 视频嵌入到我的 react-native 应用程序中，它工作正常，但我无法获得这些视频的全屏按钮/功能.这是我的代码:

I am trying to embed youtube videos in my react-native app, it is working fine but I am unable to get fullscreen button/ functionality for those videos. Here is my code:

 <WebView
  source={{uri: "https://www.youtube.com/embed/VaC9CivyV7I?version=3&enablejsapi=1&rel=0&autoplay=1&showinfo=0&controls=1&modestbranding=0"}}
style={{height:240, width:width, justifyContent:'center', alignItems:'center', backgroundColor:'black'}}
 />

我什至尝试使用 iframe 作为带有 allowfullscren="true" 的 html，但我没有取得任何成功.

I even tried using iframe as an html with allowfullscren="true", but I didn't get any success.

经过更多搜索，我发现了这个文档用于全屏支持，并且知道我需要在 webView.setWebChromeClient 中实现 onShowCustomView 和 onHideCustomView，我在我的应用程序的 node_modules 文件夹中挖掘了一点并在位置 *"../node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java" 找到 ReactWebViewManager.java.

After some more search I come across this document for Full screen support, and come to know that I need to implement onShowCustomView and onHideCustomView within webView.setWebChromeClient, I dig little bit in my app's node_modules folder and found out ReactWebViewManager.java at location *"../node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java".

看来可能需要添加一些自定义代码webView.setWebChromeClient，但由于我不擅长本地编程，因此无法进一步进行.

It seems that may need to add some custom code webView.setWebChromeClient, but as I am not that good in native programming, hence not being able to proceed further.

推荐答案

WebView 组件接受一个 allowsFullscreenVideo 属性.当此道具为真时，全屏图标将变为活动状态.

The WebView component accepts an allowsFullscreenVideo prop. When this prop is true, the fullscreen icon will become active.

参见 https://github.com/react-native-community/react-native-webview/blob/master/docs/Reference.md#allowsfullscreenvideo.

这篇关于react-native webview 嵌入 youtube 视频在 Android 中没有全屏选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！