Expo React Native Paper嵌套导航器主题设备端失效（Web端正常）

我的应用在浏览器中运行完全正常，但在iOS模拟器和Expo Go中出现主题异常，仅背景色表现问题，浅色主题也存在颜色差异：

深色主题异常截图：

浅色主题异常截图：

注意：标签导航（Tab Navigation）本身未应用主题，但Web端能正常应用。

我的Main组件用于包裹PaperProvider：

import { Provider as PaperProvider } from 'react-native-paper';

import { NavigationContainer } from '@react-navigation/native';
import themes from './constants/themes';
import MainStackNavigation from './navigation/MainStackNavigation';
import { Provider } from 'react-redux';
import store from './store';

const Main = () => {
    const theme= 'dark';
    const _theme = themes[theme];
    const session = true;

    return (
        <PaperProvider theme={_theme}>
            <Provider store={store}>
                <NavigationContainer linking={ {prefixes: []}} theme={_theme}>
                    {session ? (
                        <MainStackNavigation />
                    ) : (
                        <></>
                    )}
                </NavigationContainer>
            </Provider>
        </PaperProvider>
    );
};

主题配置代码：

import {
    DarkTheme as NavigationDarkTheme,
    DefaultTheme as NavigationDefaultTheme,
} from '@react-navigation/native';
import { MD3DarkTheme, MD3LightTheme, adaptNavigationTheme } from 'react-native-paper';
import { darkGreenColors, lightGreenColors } from '../utils/colors';


const { LightTheme, DarkTheme } = adaptNavigationTheme({
    reactNavigationLight: NavigationDefaultTheme,
    reactNavigationDark: NavigationDarkTheme,
});

const CombinedDefaultTheme = {
    ...MD3LightTheme,
    ...LightTheme,
    ...lightGreenColors,
};

const CombinedDarkTheme = {
    ...MD3DarkTheme,
    ...DarkTheme,
    ...darkGreenColors,
};

const themes = {
    light: CombinedDefaultTheme,
    dark: CombinedDarkTheme
};


export default themes;

导航核心代码：

import React from 'react';

import { createMaterialBottomTabNavigator } from 'react-native-paper/react-navigation';
import { createStackNavigator } from '@react-navigation/stack';
import { StatusBar } from 'react-native';
import { useTheme } from 'react-native-paper';


import PlantsScreen from '../screens/PlantsScreen';
import HandPlant from '../svgs/HandPlant';
import NotificationsScreen from '../screens/NotificationsScreen';

const Stack = createStackNavigator();

const Tab = createMaterialBottomTabNavigator();

const BottomBarNavigation = () => {
    const { colors } = useTheme();
    const _barStyle = 'dark-content';

    return (
        <>
            <StatusBar
                barStyle={_barStyle}
                backgroundColor={colors.background}
                animated
            />
            <Tab.Navigator>
                <Tab.Screen
                    name="plants"
                    component={PlantsScreen}
                    options={{
                        tabBarIcon: () => <HandPlant height={24}/>,
                        tabBarLabel: 'Plants',
                    }}
                />
            </Tab.Navigator>
        </>
    );
};

const MainStackNavigation = () => {
    return (
        <>
            <Stack.Navigator screenOptions={{ headerShown: false }} >
                <Stack.Screen name="home" component={BottomBarNavigation} />
                <Stack.Screen
                    name="notifications"
                    component={NotificationsScreen}
                    options={{
                        presentation: 'modal'
                    }}
                />
            </Stack.Navigator>
        </>
    );
};

export default MainStackNavigation;

我发现主题没有传递到TabNavigator，因为NotificationsScreen是正常应用主题的：

由于Web端正常，很难排查问题，求解决思路？

1. 显式为Tab.Navigator传递主题
   目前你通过useTheme获取了主题，但没有传递给Tab.Navigator。在BottomBarNavigation中，把获取到的主题直接传给Tab.Navigator的theme属性：

   const BottomBarNavigation = () => {
       const theme = useTheme();
       const _barStyle = 'dark-content';
   
       return (
           <>
               <StatusBar
                   barStyle={_barStyle}
                   backgroundColor={theme.colors.background}
                   animated
               />
               <Tab.Navigator theme={theme}> {/* 这里添加theme属性 */}
                   <Tab.Screen
                       name="plants"
                       component={PlantsScreen}
                       options={{
                           tabBarIcon: () => <HandPlant height={24}/>,
                           tabBarLabel: 'Plants',
                       }}
                   />
               </Tab.Navigator>
           </>
       );
   };
   

2. 调整主题合并顺序
   当前的主题合并顺序可能导致导航相关属性被覆盖，调整顺序让自定义颜色优先级最高，同时保留导航主题的配置：

   const CombinedDarkTheme = {
       ...DarkTheme, // 先放导航适配主题
       ...MD3DarkTheme, // 再放MD3主题
       ...darkGreenColors, // 最后放自定义颜色
   };
   const CombinedDefaultTheme = {
       ...LightTheme,
       ...MD3LightTheme,
       ...lightGreenColors,
   };
   

3. 锁定Expo的主题模式
   Expo在iOS上可能存在系统主题自动适配冲突，在app.json中强制固定主题模式：

   {
     "expo": {
       "userInterfaceStyle": "dark" // 或者"light"，根据需求设置
     }
   }
   

4. 验证页面背景色设置
   确认PlantsScreen是否硬编码了背景色，若有则替换为主题提供的颜色：

   // 在PlantsScreen中
   import { useTheme } from 'react-native-paper';
   
   const PlantsScreen = () => {
       const { colors } = useTheme();
       return (
           <View style={{ flex: 1, backgroundColor: colors.background }}>
               {/* 屏幕内容 */}
           </View>
       );
   };
   

内容的提问来源于stack exchange，提问作者Lavínia Beghini