使用Expo、Expo-router和tabs时如何修改应用背景色？

针对使用Expo Router和Tabs组件的应用，修改全局默认背景色可通过以下两种常用方法实现：

方法1：直接配置Tabs组件与全局容器样式 #

在Tabs布局文件（通常为app/(tabs)/_layout.tsx）中，给Tabs组件设置screenOptions指定Tab栏背景色，同时在根布局中给全局容器设置背景色覆盖页面内容区域的默认样式：

// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';
import { useColorScheme } from 'react-native';

export default function TabLayout() {
  const colorScheme = useColorScheme();
  const bgColor = colorScheme === 'light' ? '#你的浅色背景色' : '#你的深色背景色';
  
  return (
    <Tabs
      screenOptions={{
        tabBarStyle: { backgroundColor: bgColor },
        headerStyle: { backgroundColor: bgColor }
      }}
    >
      <Tabs.Screen name="home" options={{ title: '首页' }} />
      <Tabs.Screen name="profile" options={{ title: '我的' }} />
    </Tabs>
  );
}

// app/_layout.tsx
import { View } from 'react-native';
import { Stack } from 'expo-router';
import { useColorScheme } from 'react-native';

export default function RootLayout() {
  const colorScheme = useColorScheme();
  const bgColor = colorScheme === 'light' ? '#你的浅色背景色' : '#你的深色背景色';
  
  return (
    <View style={{ flex: 1, backgroundColor: bgColor }}>
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      </Stack>
    </View>
  );
}

方法2：自定义导航主题覆盖默认样式 #

通过@react-navigation/native的ThemeProvider替换全局主题的背景色配置：

1. 确保依赖已安装：

npx expo install @react-navigation/native react-native-safe-area-context

2. 在根布局中配置自定义主题：

// app/_layout.tsx
import { ThemeProvider, DefaultTheme, DarkTheme } from '@react-navigation/native';
import { useColorScheme } from 'react-native';
import { Stack } from 'expo-router';

export default function RootLayout() {
  const colorScheme = useColorScheme();

  const CustomLightTheme = {
    ...DefaultTheme,
    colors: { ...DefaultTheme.colors, background: '#你的浅色背景色' }
  };

  const CustomDarkTheme = {
    ...DarkTheme,
    colors: { ...DarkTheme.colors, background: '#你的深色背景色' }
  };

  return (
    <ThemeProvider value={colorScheme === 'light' ? CustomLightTheme : CustomDarkTheme}>
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      </Stack>
    </ThemeProvider>
  );
}

以上两种方法均可覆盖Expo默认的浅色rgb(242,242,242)和深色rgb(1,1,1)背景色。

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