Android 状态栏 / 底部导航栏 透明配置指南

Android 状态栏 / 底部导航栏透明配置指南React Native ExpotargetSdkVersion 35Android 15踩坑清单为什么有浅灰色背景旧版styles.xmlwindowIsTranslucent/windowTranslucentStatus会加系统灰遮罩 → 改用windowDrawsSystemBarBackgroundsstatusBarColor。对比度 scrim 底色一起控制了 Bar 的颜色仅设statusBarColor/navigationBarColortransparent把底色设为透明 不够API 29 还需关系统对比度 scrim 遮罩层isStatusBarContrastEnforced/isNavigationBarContrastEnforced为什么 js 层设置背景色不生效targetSdk 35 Android 15官网 demo 可以实现 js 层控制StatusBar.backgroundColor和translucent{false}是否延伸至顶端。RN 官方链接。但是本项目 targetSdk 35 Android 15强制 edge-to-edge导致1StatusBar.backgroundColor被忽略、2translucent{false}无法改回经典布局。原生styles.xml- 设置背景色!-- App 控制系统栏背景 --itemnameandroid:windowDrawsSystemBarBackgroundstrue/itemitemnameandroid:statusBarColorandroid:color/transparent/itemitemnameandroid:navigationBarColorandroid:color/transparent/item勿用windowIsTranslucent、windowTranslucentStatus、windowFullscreen旧安卓系统的 API。MainActivity.kt- 关闭遮罩WindowCompat.setDecorFitsSystemWindows(window,false)// 内容延伸到系统栏下方window.statusBarColorColor.TRANSPARENT// 运行时再次确保透明if(Build.VERSION.SDK_INTBuild.VERSION_CODES.Q){// Build.VERSION_CODES.Q 是 Android SDK 里用来表示 Android 10 的版本常量。// 关闭 Android 10 自动对比度遮罩StatusBar、NavigationBarwindow.isStatusBarContrastEnforcedfalsewindow.isNavigationBarContrastEnforcedfalse}JS// RN StatusBar 只管图标颜色 保持透明 (expo的StatusBar也支持。属性稍不同。) StatusBar translucent backgroundColortransparent barStylelight-content / // 需要的不透明/动态顶栏颜色 → 绝对定位 View View pointerEventsnone style{{ position: absolute, top: 0, left: 0, right: 0, height: StatusBar.currentHeight, backgroundColor: statusBarColor, zIndex: 1, }} /Navigation headerheaderTransparent: true页面背景从屏幕最顶连续绘制勿再给 header 单独套渐变。底部导航栏step1:去除底色的方案。前文已经涵盖。item nameandroid:navigationBarColorandroid:color/transparent/itemwindow.isNavigationBarContrastEnforcedfalsestep2:根据 当前系统的主题色动态设置 底部按钮的颜色以下是这种写法是 expo 54的写法。 新的可见expo sdk 57import{setButtonStyleAsync}fromexpo-navigation-bar;exportasyncfunctionapplyNavigationBarTheme(isDarkTheme){if(Platform.OS!android)return;// 深色皮肤 → 浅色按钮浅色皮肤 → 深色按钮try{//awaitsetButtonStyleAsync(isDarkTheme?light:dark);}catch(error){console.log(applyNavigationBarTheme error,error);}}备注怎么查expo 和 expo相关包的对应版本# 推荐让 Expo 自动选对版本 yarn expo install expo-navigation-bar # 或直接看映射表 cat node_modules/expo/bundledNativeModules.json | grep navigation-bar # 检查所有依赖是否对齐 npx expo-doctor npx expo install --check