告别自动链接失败react-native-keep-awake 手动集成完整教程iOS Xcode Android Gradle【免费下载链接】react-native-keep-awakeKeep the screen from going to sleep. iOS and Android.项目地址: https://gitcode.com/gh_mirrors/re/react-native-keep-awakereact-native-keep-awake是一个让屏幕保持常亮、防止 App 自动息屏的 React Native 库同时支持iOS和Android。当react-native link失效或报错时手动集成是解决自动链接失败问题的终极方案。本文是一份完整的 react-native-keep-awake 手动集成教程手把手教你在 Xcode 和 Gradle 中完成配置10 分钟即可搞定。它解决什么问题在导航、视频播放、直播看片等场景下用户希望屏幕一直保持可见。系统默认的息屏机制会中断体验而 react-native-keep-awake 只需几行代码就能锁住屏幕iOS通过setIdleTimerDisabled禁用系统空转定时器见ios/KCKeepAwake.mAndroid通过FLAG_KEEP_SCREEN_ON窗口标志实现见android/src/main/java/com/corbt/keepawake/KCKeepAwake.java⚠️小提示该库已停止维护。如果你的项目允许替换依赖可以考虑 Expo 团队的expo-keep-awake或社区维护的sayem314/react-native-keep-awake分支功能一致且持续更新。第 1 步一键安装依赖无论手动还是自动集成都要先安装 npm 包npm install --save react-native-keep-awakeReact Native 0.57 及以上直接安装最新版即可React Native 0.56 及以下请安装 v3 版本旧版 Gradle 语法兼容npm install --save react-native-keep-awake3安装完成后node_modules/react-native-keep-awake目录下即为本次手动集成的全部素材入口文件是index.js内置activate()/deactivate()静态方法。iOS 端手动集成Xcode 四步配置打开项目根目录的ios文件夹对应的 Xcode 工程按以下顺序操作1. 添加工程文件在 Xcode 左侧项目导航器中右键点击Libraries➜ 选择Add Files to [你的项目名]然后定位到node_modules/react-native-keep-awake/ios/KCKeepAwake.xcodeproj选中它加入项目。2. 链接静态库在导航器中选中你的项目工程根节点进入Build Phases➜Link Binary With Libraries点击号添加libKCKeepAwake.a3. 配置头文件搜索路径点击导航器中的KCKeepAwake.xcodeproj切换到Build Settings标签页顶部切换到All而不是 Basic在 Search Paths 区域找到Header Search Paths确保其中同时包含以下两项并且都标记为recursive$(SRCROOT)/../../react-native/React $(SRCROOT)/../../../React4. 编译验证直接 Run 项目即可。如果编译时提示找不到React/RCTBridgeModule.h99% 是第 3 步的头文件路径没配对。Android 端手动集成Gradle 三处修改Android 侧无需打开图形界面改 3 个文件即可。1. 注册原生模块打开android/app/src/main/java/[你的包路径]/MainApplication.java在文件顶部导入区添加import com.corbt.keepawake.KCKeepAwakePackage;在getPackages()方法的列表中追加一行packages.add(new KCKeepAwakePackage());这一步对应的原生实现见android/src/main/java/com/corbt/keepawake/KCKeepAwakePackage.java它负责把KCKeepAwake模块暴露给 JS 层。2. 声明子工程在android/settings.gradle文件末尾追加两行include :react-native-keep-awake project(:react-native-keep-awake).projectDir new File(rootProject.projectDir, ../node_modules/react-native-keep-awake/android)3. 添加依赖在android/app/build.gradle的dependencies块内部插入compile project(:react-native-keep-awake) 较新的 Gradle 版本中compile已废弃如遇到报错请改用implementation project(:react-native-keep-awake)。修改完成后在 Android Studio 中执行一次Sync Project with Gradle Files再编译即可。集成后怎么用两种写法任选集成成功不代表大功告成JS 侧有两种用法写法一组件挂载自动常亮import KeepAwake from react-native-keep-awake; // 组件挂载时屏幕保持常亮卸载时自动恢复 View Text屏幕将保持常亮/Text KeepAwake / /View写法二显式控制开关KeepAwake.activate(); // 开启常亮 KeepAwake.deactivate(); // 关闭常亮推荐用法视频播放开始时activate()播放结束或页面隐藏时deactivate()避免不必要的耗电。常见报错与快速排查清单 ️报错现象平台最快解决方法Unable to resolve module双端确认已执行npm install且路径为node_modules/react-native-keep-awake找不到libKCKeepAwake.aiOS回到iOS 第 2 步检查 Link Binary With Libraries 是否添加了该库找不到RCTBridgeModule.hiOS回到iOS 第 3 步确认 Header Search Paths 两条路径均为 recursiveCould not find compileAndroid改用implementation语法并确认 settings.gradle 中路径无多余 Tab 缩进打包后功能失效双端检查是否同时集成了 iOS 与 Android 两端配置写在最后按照本文步骤iOS 四步、Android 三处修改即可完成 react-native-keep-awake 的完整手动集成。相比自动链接手动集成虽然多花几分钟但配置完全可控从此告别自动链接失败的抓心挠肝。项目核心文件一览JS 入口index.js原生模块iOSios/KCKeepAwake.m原生模块Androidandroid/src/main/java/com/corbt/keepawake/KCKeepAwake.java包信息package.json【免费下载链接】react-native-keep-awakeKeep the screen from going to sleep. iOS and Android.项目地址: https://gitcode.com/gh_mirrors/re/react-native-keep-awake创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考