React native orientation 屏幕旋转监听

Posted 2023-03-23

参考技术A android 和 ios 都有在全局设置中固定屏幕方向的办法，但这样不是特别理想，因为项目中，在不同页面可能会需要横屏或竖屏，此时就可以使用 react-native-orientation ，这个扩展可以动态的锁定/解锁屏幕方向，或设置为指定的方向。

安装方式

yarn add react-native-orientation

安装完之后二选一 (这个是 rn 安装原生组件的通用命令)

详情可参考 官方介绍 或 这篇文章

然后继续

android 打开 android/app/src/main/java/com/[project]/MainActivity.java

iOS 打开 ios/[project]/AppDelegate.m

安装完事

使用方法，可直接前往 项目主页 查看，非常简单（其实上面的步骤在项目主页中也有），这里说一个项目主页没提到的

在使用了如 lockToPortrait() 方法锁定屏幕方向后，由 addOrientationListener 添加的监听函数有不同

1、android 上将不会再触发，直到调用 unlockAllOrientations() 解除锁定
2、iOS 则不然，无论屏幕锁定与否，都会触发

react-native-video 的 react-native-orientation 的反应原生布尔条件

【中文标题】react-native-video 的 react-native-orientation 的反应原生布尔条件

【英文标题】：react native Boolean condition for react-native-orientation of react-native-video

【发布时间】：2019-11-12 04:17:07

【问题描述】：

我对 React 原生主题非常陌生。我被困在视频播放器方向的非常简单的检查条件上。

我的代码步骤是：

以下代码是我的状态，即boolean。

state = 
    viewmode: false,
;

2.下面这行代码是我的视频播放器图标（横向和纵向）。

<TouchableWithoutFeedback onPress=this.changeViewModes>
  <MIcon name=!this.state.viewmode ? "fullscreen" : "fullscreen-exit" size=30 color="#FFF"></MIcon>
</TouchableWithoutFeedback>

到目前为止，一切都运行良好。但是根据要求，视频播放器必须旋转到横向模式和纵向模式。 所以我写了一个条件，它不能正常工作，只显示一种模式，纵向或横向但不旋转

changeViewModes = () => 
  if (!this.state.viewmode == false) 
    //fullscreen
    this.player.presentFullscreenPlayer();
    Orientation.lockToLandscape();
   else 
    //fullscreen_exit
    Orientation.lockToPortrait();
  
;

视频组件代码

<Video  paused=this.state.paused
        source=LightVideo
        style= width: "100%", height 
        resizeMode="contain"
        onLoad=this.handleLoad
        onProgress=this.handleProgress
        onEnd=this.handleEnd
        ref=ref =>

  this.player = ref;
          />

谁能帮我将我的视频播放器旋转到横向模式到纵向模式，反之亦然。

【问题讨论】：

viewmode(true) 表示不是全屏？

@Lenoarod 确切的问题是，当页面加载时，视频播放器将处于纵向模式，但是当我单击全屏模式时，它会变成我想要的全屏和横向模式，但是现在，如果我再次单击，那么它仍将仅处于横向模式。它不再旋转到纵向模式。

@Lenoarod 请查看编辑。我已经粘贴了视频组件代码和图标更改

手动全屏退出手柄时，还要调用dismissFullscreenPlayer

@Lenoarod 它不工作

【参考方案1】：

我资产viewmodel true 表示全屏。然后你点击你的 Mico 来改变全屏。

// this is your video component
Video source=uri: "background"   
       ref=(ref) => 
         this.player = ref
        />

state = 
viewmode: false, // true means full screen
;

<TouchableWithoutFeedback onPress = this.changeViewModes>
              <MIcon name = !this.state.viewmode ? "fullscreen" : "fullscreen-exit" size = 30 color="#FFF"></MIcon>
              </TouchableWithoutFeedback>

changeViewModes = () => 

if(!this.state.viewmode)
 
  //fullscreen
  this.player.presentFullscreenPlayer();
  Orientation.lockToLandscape();

 else 

  //fullscreen_exit
  this.player.dismissFullscreenPlayer()  // you don not call this method
  Orientation.lockToPortrait(); 


// you also have to update the state
this.setState(
   viewModel:!viewModel

)

【讨论】：

即使它的真假我的代码也不起作用。确切的问题是，当页面加载时，视频播放器将处于纵向模式，但是当我单击全屏模式时，它会变为我想要的全屏和横向模式，但是现在如果我再次单击，那么它仍然是仅在横向模式下。它不再旋转到纵向模式。

首先，你的代码不会改变状态，所以图标不会随着状态而改变。并请提供您的视频组件代码。