React Native：仅在webview播放视频时允许设备轮换

Question

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

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

我能实现这个简单而干净的方法吗？

Answer 1

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

我们的目标

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

使用入门

我将概述我是如何在iOS中完成的，React Native部分肯定也适用于Android。

启用所有方向

您无法启用所有方向（人像，上下颠倒，左侧风景，右侧风景）。

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

React Native Package

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

狡猾的一点，而且它很丑陋！

我无法找到告诉用户何时在WebView中观看视频的方法。这是因为iOS使用其原生播放器。

我的VideoPlayer组件位于ScrollView（以及其他组件）之内。当用户滚动（观看视频后）时，应用程序将再次锁定回纵向。

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

注意

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

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

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