用户登录
用户注册

分享至

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

  • 作者: 你是我的21646098
  • 来源: 51数据库
  • 2021-08-11

关于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 及以下)

    yarn add react-native-orientation-locker
    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屏幕了

软件
前端设计
程序设计
Java相关