如何在React Native中修改NavigationContainer的背景颜色？

要修改NavigationContainer的背景色，你之前的方法存在误区：NavigationContainer不支持直接传入style属性，而你设置的stackNavigatorOptions仅修改了导航栏背景，并未处理容器本身的背景。正确做法是通过自定义React Navigation主题实现：

解决步骤 #

1. 基于DefaultTheme扩展自定义主题，将background颜色改为黑色
2. 将自定义主题传递给NavigationContainer的theme属性
3. 同步设置屏幕内容区域的背景色，避免屏幕自带的白色背景覆盖容器

完整代码示例 #

import React from 'react';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import First from './components/first';
import Login from './components/login';

const Stack = createStackNavigator();

// 自定义主题
const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: 'black', // 修改容器背景为黑色
  },
};

function App() {
  return (
    <NavigationContainer theme={MyTheme}>
      <Stack.Navigator 
        initialRouteName="First"
        screenOptions={{
          headerStyle: {
            backgroundColor: 'black', // 保持导航栏背景为黑色
          },
          headerTintColor: 'white', // 可选：修改导航栏文字/图标颜色为白色，提升可读性
          contentStyle: {
            backgroundColor: 'black', // 设置所有屏幕内容区域的背景为黑色
          },
        }}
      >
        <Stack.Screen name="First" component={First} />
        <Stack.Screen name="Login" component={Login} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

补充说明 #

• 若个别屏幕需要不同背景色，可在对应屏幕组件的根视图中单独设置backgroundColor
• 旧版React Navigation中的defaultNavigationOptions已被弃用，推荐使用screenOptions直接配置

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