当前位置:   article > 正文

React native 获取屏幕方向,限制横竖屏 react-native-orientation和react-native-orientation-locker

react-native-orientation-locker

关于RN下横竖屏的相关操作,浏览了很多博客都是使用这个老库居多,后发现一个bug ,新库中有所解决。但新库也有点异常的地方。暂时先做记录,后续再来填坑。

老库:https://github.com/yamill/react-native-orientation

新库:https://github.com/wonday/react-native-orientation-locker
github地址

 

安装:

使用 yarn (RN 0.60 及以上)

    yarn add react-native-orientation-locker

使用 yarn (RN 0.59 及以下)

  1. yarn add react-native-orientation-locker
  2. react-native link react-native-orientation-locker

Functions

  • lockToPortrait() //锁住竖屏
  • lockToLandscape() //锁住横屏
  • lockToLandscapeLeft() this will lock to camera left home button right
  • lockToLandscapeRight() this will lock to camera right home button left
  • lockToPortraitUpsideDown only support android
  • lockToAllOrientationsButUpsideDown only ios
  • unlockAllOrientations() //解除方向限制
  • getOrientation(function(orientation))
  • getDeviceOrientation(function(deviceOrientation))
  • getAutoRotateState(function(state)) (android only)
  • isLocked() (lock status by this library)

orientation can return one of:

  • PORTRAIT
  • LANDSCAPE-LEFT camera left home button right
  • LANDSCAPE-RIGHT camera right home button left
  • PORTRAIT-UPSIDEDOWN
  • FACE-UP
  • FACE-DOWN
  • UNKNOWN

 

记录一个常见的问题,就是当android限制屏幕方向生效,ios不生效时,请加以下代码即可生效。老库的这个代码在部分ios机型可能存在报错风险,推荐尽量使用新库。

#include <react-native-orientation/Orientation.h>

-(UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window { return [Orientation getOrientation]; }

在AppDelegate.m中加上这个代码就可以锁住ios屏幕了

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Monodyee/article/detail/273672
推荐阅读
相关标签
  

闽ICP备14008679号