react native 设置屏幕锁定

原生配置

android 在android/app/src/main/AndroidManifest.xml在这个文件里的入口activity里添加

android:screenOrientation="portrait"

java 复制代码
 <activity
        android:name=".MainActivity"
        android:label="@string/app_name"                               android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize"
        android:screenOrientation="portrait"
        android:exported="true"
>

iOS在AppDelegate.mm文件里加上一下代码

objectivec 复制代码
- (void)setOrientationLock {
    // 设置竖屏锁定
    [[UIDevice currentDevice] setValue:@(UIInterfaceOrientationPortrait) forKey:@"orientation"];
}

- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
    return UIInterfaceOrientationMaskPortrait;
}

第三方包

react-native-orientation-locker

先按照文档里配置,以下是用法示例:

javascript 复制代码
  componentWillMount() {
    //横屏
    Orientation.lockToLandscape();
  }
  componentWillUnmount() {
    //页面销毁后恢复竖屏
    Orientation.lockToPortrait();
  }

具体用法可以去文档去查。

相关推荐
开开心心就好27 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
yanlele9 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4539 小时前
React移动端开发项目优化
前端·react.js·前端框架
天若有情6739 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
烛阴9 小时前
WebSocket实时通信入门到实践
前端·javascript