javascript - react native : Allow device rotation only when webview plays video

Question

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

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

有没有一种简单明了的方法可以实现它？

Answer 1

我可能来晚了一点，但我最近添加了您的问题所要求的内容。

我们的目标

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

开始

我将概述我是如何在 iOS 中实现的，React Native 部分当然也适用于 Android。

启用所有方向

您不想启用所有方向(纵向、倒置、横向左、横向右)。

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

React Native 包

下载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();
}