React Native：仅当 webview 播放视频时才允许设备旋转

Question

我当前的工作应用程序在整个屏幕上都被锁定为纵向模式。该应用程序在 webview 上播放嵌入的 YouTube 视频，我只想在全屏播放时才允许横向模式。

我看到本地方式有一些技巧，我认为与 React Native 不兼容。我还检查了react-native-orientation但它对我没有帮助。

有没有一种简单而干净的方法可以实现这一点？

Answer 1

我参加聚会可能有点晚了，但我最近添加了您的问题要求的内容。

我们的目标

除非用户正在观看视频，否则应用程序应固定为纵向。在观看视频时，用户应该能够在纵向和横向之间自由切换。

入门

我将概述我如何在 iOS 中做到这一点，React Native 部分当然也适用于 Android。

启用所有方向

您不想启用所有方向（纵向、倒置、横向左侧、横向右侧）。

我从 Google 上截取了以下图片，只需确保选中所有复选框即可。

反应本机包

下载react-native-orientation并在您的 中index.ios.js，添加代码以锁定设备方向。

例如，我的在一个componentWillMount.

componentWillMount() {
  Orientation.lockToPortrait();
}

通过 WebView 观看视频时禁用锁定

然后我有一个简单的VideoPlayer组件。

<TouchableWithoutFeedback onPress={this.handleClick}>
  <WebView
    source={{uri: 'https://youtube.com'}}
  />
</TouchableWithoutFeedback>

我曾经TouchableWithoutFeedback因为我不想让用户知道他们点击了某些东西。

创建一个handleClick函数：

handleClick = () => {
  Orientation.unlockAllOrientations()
}

棘手的一点，它很hacky！

我找不到一种方法来判断用户何时在 WebView 中观看完视频。这是因为 iOS 使用其本机播放器。

我的VideoPlayer组件在一个ScrollView（在其他组件中）。当用户滚动（观看视频后）时，应用程序将再次锁定为纵向。

<ScrollView
  onScroll={() => { Orientation.lockToPortrait(); }}
/>

笔记

这将锁定所有设备，包括平板电脑。如果你只想在手机上运行它，我使用react-native-device-info来检测设备是否是平板电脑。

您可以将所有方向包装在 if 语句中：

if (!DeviceInfo.isTablet()) {
  Orientation.lockToPortrait();
}