React Navigation与Paper主题在栈、底部导航页面背景不生效问题

解决方案 #

1. 修复主题赋值逻辑错误 #

你当前的主题判断写反了，暗黑模式触发时实际赋值的是浅色主题，修改对应逻辑即可：

// 修改前
const theme = isDarkTheme ? CustomDefaultTheme : CustomDarkTheme
// 修改后
const theme = isDarkTheme ? CustomDarkTheme : CustomDefaultTheme

2. 给Stack、Bottom Tab导航器手动配置内容背景 #

Top Tab Navigator（@react-navigation/material-top-tabs）默认会自动继承主题的background色作为内容容器背景，但Native Stack、Bottom Tab Navigator默认使用固定白色背景，需要手动在导航器的screenOptions中绑定主题背景色：

示例：Stack Navigator配置

import { useTheme } from 'react-native-paper';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();
const Stack_LoginRegister = () => {
  const theme = useTheme();
  return (
    <Stack.Navigator
      screenOptions={{
        // 给页面内容容器设置主题背景色
        contentStyle: {
          backgroundColor: theme.colors.background
        }
      }}
    >
      {/* 原有页面配置不变 */}
    </Stack.Navigator>
  )
}

示例：Bottom Tab Navigator配置

和Stack配置逻辑完全一致，在BottomTab.Navigator的screenOptions中添加同样的contentStyle配置即可。

3. 页面根容器适配（可选） #

如果修改后仍有个别页面背景异常，确认页面的根组件使用react-native-paper提供的View/Surface组件，或者手动给根组件的backgroundColor绑定theme.colors.background，避免自定义样式覆盖导航层的背景设置。

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