React Native CLI：如何适配深浅模式设置安卓底部导航栏为白/黑色？

针对你需要在浅色模式下将底部导航栏设为白色、深色模式下设为黑色的需求，提供以下几种实现方式：

方式一：主题样式配置（推荐） #

在项目的资源目录中，分别为浅色和深色模式配置主题样式：

1. 浅色模式（res/values/styles.xml）：

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
    <!-- 保留原有主题配置，新增导航栏相关设置 -->
    <item name="android:navigationBarColor">@android:color/white</item>
    <!-- 适配深色图标，确保白色导航栏上图标清晰可见 -->
    <item name="android:windowLightNavigationBar">true</item>
</style>

2. 深色模式（res/values-night/styles.xml）：

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
    <!-- 保留原有主题配置，新增导航栏相关设置 -->
    <item name="android:navigationBarColor">@android:color/black</item>
    <!-- 切换为浅色图标，适配黑色导航栏 -->
    <item name="android:windowLightNavigationBar">false</item>
</style>

方式二：代码动态设置 #

如果需要在运行时根据模式变化实时调整，可在Activity中添加以下逻辑：

// 判断当前是否处于深色模式
val isDarkMode = resources.configuration.uiMode 
    and Configuration.UI_MODE_NIGHT_MASK == Configuration.UI_MODE_NIGHT_YES

// 设置导航栏背景色
window.navigationBarColor = if (isDarkMode) Color.BLACK else Color.WHITE
// 设置导航栏图标亮度，确保与背景色对比度足够
window.isLightNavigationBarEnabled = !isDarkMode

注意事项 #

• 确保应用主题继承自支持昼夜切换的主题，比如Theme.MaterialComponents.DayNight或Theme.AppCompat.DayNight
• android:windowLightNavigationBar属性仅支持Android 8.0（API级别26）及以上版本

内容的提问来源于stack exchange，提问作者user14263509