React Native修改Android底部凹槽颜色问题求助

解决方案 #

你要修改的是安卓系统级的导航栏（虚拟按键区域）颜色，React Navigation的常规组件样式配置无法直接控制这个区域，以下是可行的解决方法：

方法1：使用React Native原生API直接设置 #

通过StatusBar模块的安卓专属API设置导航栏颜色：

import { Platform, StatusBar } from 'react-native';
import { useEffect } from 'react';

// 在根组件或目标页面的 useEffect 中执行
useEffect(() => {
  if (Platform.OS === 'android') {
    // 设置导航栏背景色为红色
    StatusBar.setBackgroundColor('red');
    // 可选：如果导航栏图标需要浅色显示（适配深色背景），添加此行
    // StatusBar.setBarStyle('light-content');
  }
}, []);

方法2：通过React Navigation V6的androidNavigationBar配置 #

在Stack Navigator的screenOptions中直接配置安卓导航栏：

<RootStack.Navigator 
  screenOptions={{ 
    gestureEnabled: true,
    androidNavigationBar: {
      backgroundColor: 'red',
      // 可选：设置导航栏图标文字颜色，支持 'light-content' / 'dark-content'
      barStyle: 'light-content'
    }
  }}
>
  {/* 你的页面路由 */}
</RootStack.Navigator>

额外修正：你之前的主题配置错误 #

你定义了自定义主题MyTheme，但在NavigationContainer中传入的是DefaultTheme，这会导致主题设置不生效（不过这并不影响系统导航栏颜色），正确写法应为：

<NavigationContainer theme={MyTheme}>
  <ROOTSTACK1></ROOTSTACK1>
</NavigationContainer>

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