兄弟，我之前做Expo RN项目时也踩过一模一样的坑！你说的把整个App包在View里加flex:1和背景色后内容消失，大概率是这个外层View的层级问题——它直接占满了整个屏幕，把你的底部标签导航和页面内容都给盖住了，所以只能看到背景色，内容全被压在下面了。

给你捋几个靠谱的解决办法，亲测有效：

1. 放弃“大View套所有”的思路，换姿势管理主题背景 #

首先得丢掉那种用一个外层View包裹整个导航的做法，这种方式很容易搞乱组件层级。咱们改用Expo官方推荐的Appearance API来管理明暗主题，或者自己搞个状态手动控制切换。

先定义好你的明暗主题色配置：

// 先定义主题色集合
const lightTheme = {
  screenBg: '#ffffff',
  tabBarBg: '#f5f5f5',
  textColor: '#000000'
};
const darkTheme = {
  screenBg: '#1a1a1a',
  tabBarBg: '#2d2d2d',
  textColor: '#ffffff'
};

2. 选个主题切换的方式：跟随系统或手动控制 #

如果想让App跟随手机系统的明暗模式，就用useColorScheme：

import { useColorScheme } from 'react-native';

// 在组件里获取当前系统主题
const colorScheme = useColorScheme();
const currentTheme = colorScheme === 'dark' ? darkTheme : lightTheme;

要是想做手动切换的开关，就自己搞个状态控制：

import { useState } from 'react';

// 手动控制主题的状态
const [isDarkMode, setIsDarkMode] = useState(false);
const currentTheme = isDarkMode ? darkTheme : lightTheme;

// 给你的切换开关绑定事件
<ToggleSwitch
  value={isDarkMode}
  onValueChange={setIsDarkMode}
/>

3. 给导航和页面分别设置对应主题的背景 #

接下来在底部标签导航的配置里，给标签栏和导航头设置对应主题的背景：

<Tab.Navigator
  screenOptions={{
    // 给底部标签栏设置背景色
    tabBarStyle: { backgroundColor: currentTheme.tabBarBg },
    // 给页面头部设置背景色
    headerStyle: { backgroundColor: currentTheme.screenBg },
    headerTintColor: currentTheme.textColor
  }}
>
  {/* 你的各个Tab页面 */}
  <Tab.Screen name="Home" component={HomeScreen} />
  <Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>

然后每个页面组件内部，要给自己的容器设置背景色和flex:1：

function HomeScreen() {
  // 这里也可以拿到当前主题，或者通过props、Context传过来
  const colorScheme = useColorScheme();
  const currentTheme = colorScheme === 'dark' ? darkTheme : lightTheme;
  
  return (
    <View style={{ flex: 1, backgroundColor: currentTheme.screenBg }}>
      {/* 这里放你的页面内容 */}
      <Text style={{ color: currentTheme.textColor }}>我是首页内容</Text>
    </View>
  );
}

4. 别忘了在app.json里配置主题支持 #

最后要在项目根目录的app.json里加一行配置，让App支持自动适配系统主题：

{
  "expo": {
    // 其他配置...
    "userInterfaceStyle": "automatic"
  }
}

这样改完之后，不仅明暗模式切换时背景色能正常变化，页面内容也不会消失了——因为咱们是给每个层级的组件（导航栏、标签栏、页面本身）分别设置背景，不会出现层级覆盖的问题。

内容来源于stack exchange