关键词：
【中文标题】如何在 React Native youtube iframe 中切换到全屏（单击 YouTube 播放器 gui 上的全屏按钮旋转到横向）？【英文标题】：How to switch to full screen(rotate to landscape on click of full-screen button on YouTube player gui) in React Native youtube iframe? 【发布时间】：2022-01-08 18:02:01 【问题描述】：我想通过单击播放器 gui 上的全屏按钮将播放器切换到横向模式。我正在使用博览会，所以我使用博览会方向，我可以通过调用 onfullscreenchange 道具上的函数切换到横向模式，但是在退出全屏模式后，应用程序被锁定在横向模式。我该如何解决？
我的代码：
VideoPlayer.js
import React from "react";
import View, Dimensions from "react-native";
import YoutubePlayer from "react-native-youtube-iframe";
import * as ScreenOrientation from "expo-screen-orientation";
const VideoPlayer = () =>
function setOrientation()
if (Dimensions.get("window").height > Dimensions.get("window").width)
//Device is in portrait mode, rotate to landscape mode.
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
else
//Device is in landscape mode, rotate to portrait mode.
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
return (
<View
style=
width: "100%",
height: 220,
>
<YoutubePlayer
height=300
play=false
videoId="Dv7gLpW91DM"
onFullScreenChange=setOrientation
/>
</View>
);
;
export default VideoPlayer;
【问题讨论】：
【参考方案1】：您可以使用从 onFullScreenChange 返回的布尔值来确定播放器是否处于全屏状态，然后从那里设置正确的方向，我现在无法测试，但应该是这样的
onFullScreenChange=isFullscreen =>
if(isFullscreen) setOrientationToPortrait()
else setOrientationToLandscape()
【讨论】：
是的，谢谢你的帮助如何在 React Native youtube iframe 中切换到全屏（单击 YouTube 播放器 gui 上的全屏按钮旋转到横向）？
】如何在ReactNativeyoutubeiframe中切换到全屏（单击YouTube播放器gui上的全屏按钮旋转到横向）？【英文标题】：Howtoswitchtofullscreen(rotatetolandscapeonclickoffull-screenbuttononYouTubeplayergui)inReactNativeyoutubeiframe?【发布时间】：2022-01-0818:02:01【问... 查看详情
在 React Native 的 Webview 中嵌入 youtube 视频
】在ReactNative的Webview中嵌入youtube视频【英文标题】：EmbedyoutubevideoinWebviewofReactNative【发布时间】：2016-11-0407:42:05【问题描述】：我正在尝试在反应原生android/ios应用程序中播放Youtube视频。我已经定义了一个webview：<WebViewstyle=st... 查看详情
任务“：react-native-youtube:verifyReleaseResources”执行失败
】任务“：react-native-youtube:verifyReleaseResources”执行失败【英文标题】：Executionfailedfortask\':react-native-youtube:verifyReleaseResources\'【发布时间】：2018-11-1607:01:02【问题描述】：在构建reactnative应用程序时，我收到以下错误。*什么地方... 查看详情
在 React Native 应用程序中嵌入 Youtube 视频
】在ReactNative应用程序中嵌入Youtube视频【英文标题】：EmbeddingYoutubeVideosinReactNativeApplication【发布时间】：2018-09-0506:15:37【问题描述】：我了解这是一个高度记录的问题，我一直在努力寻找解决方案，但到目前为止我在网上找到... 查看详情
在 React Native 中使用 Youtube Data API
】在ReactNative中使用YoutubeDataAPI【英文标题】：UseYoutubeDataAPIinReactNative【发布时间】：2017-07-1023:28:19【问题描述】：是否可以在Android的ReactNative应用程序中使用YoutubeDataAPI？我想通过YoutubeDataAPI检索我上传的频道...【问题讨论】：... 查看详情
我从 react native 开始，如何正确安装 yarn？已经尝试过 google 和 YouTube
】我从reactnative开始，如何正确安装yarn？已经尝试过google和YouTube【英文标题】：Iamstartingoutinreactnative,howdoIinstallyarncorrectly?AlreadytriedgoogleandYouTube【发布时间】：2021-04-2507:32:33【问题描述】：这是我的第一篇文章。我刚刚开始使用... 查看详情
react-native-youtube 当手机处于静音模式时没有视频声音
】react-native-youtube当手机处于静音模式时没有视频声音【英文标题】：react-native-youtubenovideosoundwhenphoneisinsilentmode【发布时间】：2018-07-0221:18:12【问题描述】：我知道有类似的问题，但不幸的是，我尝试过的每个解决方案都失败了... 查看详情
React-Native-Video 如何在视频未全屏或不在屏幕时暂停视频
】React-Native-Video如何在视频未全屏或不在屏幕时暂停视频【英文标题】：React-Native-Videohowtopausethevideowhenvideonotinfullscreenoroffthescreen【发布时间】：2019-12-0306:40:17【问题描述】：我正在使用React-Native制作一个像YouTube这样的Android视... 查看详情
React Native webview，播放 youtube 视频 - 违反设备和网络滥用政策
...我将我的应用程序提交到Play商店时，我收到以下错误。如何提交我的应用？exportdefaultclassVideo 查看详情
如何让我的 React Native 应用出现在 android 的分享列表中
】如何让我的ReactNative应用出现在android的分享列表中【英文标题】：Howtomakemyreactnativeappappearinthesharelistonandroid【发布时间】：2021-11-0709:48:45【问题描述】：我正在尝试让我的react本机应用出现在共享应用列表中，例如来自youtube。... 查看详情
使用 React Native 的 Webview 和 listview 中的 Youtube 视频
】使用ReactNative的Webview和listview中的Youtube视频【英文标题】：YoutubevideoinWebviewandlistviewusingReactNative【发布时间】：2018-02-2017:46:03【问题描述】：我是ReactNative的新手。我面临Youtube视频仅播放音频的问题。下面是我现在使用的代码... 查看详情
react-native-video：无法读取 null 的属性“常量”
】react-native-video：无法读取null的属性“常量”【英文标题】：react-native-video:Cannotreadproperty\'Constants\'ofnull【发布时间】：2020-02-0115:17:39【问题描述】：我正在尝试在我的react原生项目中包含一个YouTube视频。由于我已经尝试过react-... 查看详情
React Native（Expo）文件对象与 Javascript（jQuery）文件对象 - Blob/文件大小不同（YouTube 数据 API）
】ReactNative（Expo）文件对象与Javascript（jQuery）文件对象-Blob/文件大小不同（YouTube数据API）【英文标题】：ReactNative(Expo)FileobjectvsJavascript(jQuery)Fileobject-Blob/Filesizediffer(YouTubeDataAPI)【发布时间】：2021-09-2306:30:06【问题描述】：我正... 查看详情
ClojureScript + React-Native - 嵌入视频
】ClojureScript+React-Native-嵌入视频【英文标题】：ClojureScript+React-Native-EmbedVideos【发布时间】：2018-11-1510:42:43【问题描述】：我是ClojureScript的新手。我想使用ClojureScript和ReactNative将视频(Youtube)嵌入到混合移动应用程序中。我尝试在... 查看详情
如何在排毒中使用 react-native-i18n[react-native]
】如何在排毒中使用react-native-i18n[react-native]【英文标题】：Howtousereact-native-i18nindetox[react-native]【发布时间】：2019-02-1721:46:06【问题描述】：我想在detox中测试alert消息，消息使用i18n。consti18n=require("react-native-i18n");describe("Example",(... 查看详情
react-native 中的 Redux 错误
】react-native中的Redux错误【英文标题】：Reduxerrorinreact-native【发布时间】：2018-04-2123:28:48【问题描述】：我正在尝试实现redux以在多个屏幕中显示平衡，因为我在单个屏幕中更新平衡应该反映在所有其他屏幕/组件中。我对redux还... 查看详情
如何在 React Native 中的循环中查找
】如何在ReactNative中的循环中查找【英文标题】：HowtoseekwithinaloopinReactNative【发布时间】：2019-08-2809:55:11【问题描述】：我开始使用react-native开发。我正在使用react-native-video在我的应用程序中添加视频。我想在for循环中来回搜索... 查看详情
如何在 React Native 中使用 React Native Video 显示多个视频？ [关闭]
】如何在ReactNative中使用ReactNativeVideo显示多个视频？[关闭]【英文标题】：HowcanIshowmultiplevideoswithReactNativeVideoinReactNative?[closed]【发布时间】：2020-02-1409:30:29【问题描述】：如何使用ReactNative的ReactNativeVideo组件显示多个视频？这里... 查看详情