React Native使用NativeBase时全局暗黑模式不生效问题求助

核心原因 #

NativeBase 的原生 <View> 组件默认不会自动继承主题的背景色配置，只有 NativeBase 提供的专属组件（如 <Box>、<Container>）才会自动适配颜色模式的样式。

解决方案 #

1. 替换为 NativeBase 的 <Box> 组件 #

直接将页面中的 <View> 替换为 <Box>，它会自动继承当前主题的背景色，无需额外设置样式：

// 原代码
<View>...</View>

// 修改后
<Box>...</Box>

2. 全局覆盖原生 <View> 的默认样式 #

在自定义主题中扩展 View 组件的基础样式，让所有原生 <View> 自动适配颜色模式：

const customTheme = extendTheme({
  config: {
    useSystemColorMode: false,
    initialColorMode: 'dark',
  },
  components: {
    View: {
      baseStyle: ({ colorMode }) => ({
        // 根据颜色模式设置对应背景色，可替换为你需要的主题色值
        backgroundColor: colorMode === 'dark' ? 'gray.900' : 'white',
      }),
    },
  },
});

3. 给根容器设置主题背景色 #

在导航器的根组件或页面最外层添加一个全屏容器，使用 NativeBase 主题中的背景色变量：

// 示例：在页面根组件中
import { Box } from 'native-base';

export default function YourPage() {
  return (
    <Box flex={1} bg="background">
      {/* 页面内容 */}
    </Box>
  );
}

bg="background" 会自动匹配当前颜色模式下的主题背景色（暗黑模式下为深色，浅色模式下为白色）。

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