如何在React Native中通过Expo-Route全局设置所有View背景色？

先理清两者的关系 #

Expo Router 是基于 React Navigation 做的上层封装，核心逻辑还是 React Navigation，但它用文件系统路由代替了手动编写路由配置的方式。你看 React Navigation 文档觉得不对口，是因为 Expo Router 有自己的上层用法，但样式全局配置这类底层需求，依然要借助 React Navigation 的能力来实现。

全局设置所有页面背景色的几种方法 #

1. 在根_layout.tsx里全局包裹 #

直接在路由根目录的_layout.tsx中，给外层套一个带背景色的 View，所有页面都会在这个容器内渲染：

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

export default function RootLayout() {
  return (
    <View style={{ flex: 1, backgroundColor: 'blue' }}>
      <Stack>
        {/* 你的路由配置，比如<Stack.Screen name="index" /> */}
      </Stack>
    </View>
  );
}

如果用的是 Tabs 布局，把 Tabs 放在这个带背景色的 View 里即可，效果一致。

2. 封装全局容器组件 #

需要更灵活的控制时，可以写一个全局页面容器，所有页面都用它包裹：

// components/GlobalContainer.tsx
import { View, ViewProps } from 'react-native';

export default function GlobalContainer({ children, ...props }: ViewProps) {
  return (
    <View style={{ flex: 1, backgroundColor: 'blue', ...props.style }}>
      {children}
    </View>
  );
}

之后每个页面都这样使用：

// app/index.tsx
import GlobalContainer from '../components/GlobalContainer';

export default function HomePage() {
  return (
    <GlobalContainer>
      {/* 页面内容 */}
    </GlobalContainer>
  );
}

这种方式的好处是，个别页面需要修改背景色时，直接传递 style 属性覆盖即可。

3. 利用 React Navigation 的主题配置 #

由于 Expo Router 底层依赖 React Navigation，所以可以通过自定义主题来全局设置背景色：

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

const CustomTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: 'blue', // 全局背景色
  },
};

export default function RootLayout() {
  return (
    <ThemeProvider value={CustomTheme}>
      <Stack>
        {/* 路由配置 */}
      </Stack>
    </ThemeProvider>
  );
}

这个方法会让 React Navigation 的内置组件（比如默认头部）也应用该主题色，如果你已经自定义了头部样式，可按需调整。

注意事项 #

• 如果页面内的子 View 单独设置了背景色，会覆盖全局样式，所以要么不给子 View 单独设置，要么通过样式优先级强制覆盖。
• Expo Router 主要简化了路由配置，但样式、导航逻辑很多仍依赖 React Navigation 的底层能力，因此遇到样式问题时，React Navigation 的主题、样式相关文档依然适用，只需结合 Expo Router 的_layout.tsx进行配置即可。

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