如何在Expo Router中修改<View>组件的默认背景色？

针对你的场景（RootLayout使用<Slot>而非<Stack>，不想通过app.json影响头部元素），有两种高效的全局设置方案：

方案一：自定义全局View组件（灵活可控） #

创建一个封装了默认背景色的自定义View组件，在项目中统一使用它代替原生View：

1. 创建components/GlobalView.tsx：

import { View, ViewProps, StyleSheet } from 'react-native';

const GlobalView = (props: ViewProps) => {
  // 合并自定义默认样式和传入的style
  return (
    <View
      {...props}
      style={[styles.defaultBg, props.style]}
    >
      {props.children}
    </View>
  );
};

const styles = StyleSheet.create({
  defaultBg: {
    backgroundColor: '#f5f5f5', // 替换为你需要的背景色
  },
});

export default GlobalView;

2. 在项目中使用：

// 替换原生View的导入
import GlobalView from '../components/GlobalView';

// 使用方式和原生View完全一致
<GlobalView>
  <Text>Sign out</Text>
</GlobalView>

如果想避免手动替换所有导入，可以通过babel别名自动映射：

• 先安装依赖：npm install babel-plugin-module-resolver --save-dev
• 修改babel.config.js：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          alias: {
            'react-native/Libraries/Components/View/View': './components/GlobalView.tsx',
          },
        },
      ],
    ],
  };
};

这样所有import { View } from 'react-native'都会自动指向你的自定义组件。

方案二：全局修改View默认样式（无需替换组件） #

利用React Native的StyleSheet.setStyleAttributePreprocessor，直接全局覆盖未显式设置背景色的View：

在app/_layout.tsx中添加以下代码：

import { StyleSheet } from 'react-native';
import { AuthProvider, Slot } from 'expo-router';

// 全局设置View默认背景色
StyleSheet.setStyleAttributePreprocessor('backgroundColor', (value) => {
  // 仅当未显式设置backgroundColor时使用默认值
  return value ?? '#f5f5f5';
});

export default function RootLayout() {
  return (
    <AuthProvider>
      <Slot />
    </AuthProvider>
  );
}

注意事项 #

• 方案二会影响所有View（包括第三方组件中的View），如果某些组件需要不同背景色，只需显式设置backgroundColor即可覆盖默认值。
• 方案一更适合需要精细控制的场景，比如部分View不需要默认背景色时，可以通过props开关控制。

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