React native 获取屏幕方向，限制横竖屏 react-native-orientation和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 及以下)

    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屏幕了