如何修改React Native中react-native-elements Header的全区域背景色

问题原因 #

你看到的顶部蓝色区域是系统状态栏的默认背景色，react-native-elements的Header组件默认仅控制自身内容区域的背景，不会主动修改系统状态栏的样式，因此会出现上下颜色不一致的问题。

方案1：单页面单独配置状态栏 #

在ConnexionScreen组件中引入React Native自带的StatusBar组件，设置和Header一致的背景色即可：

import React from 'react';
import { View, Text, Button, StatusBar } from 'react-native';
import { Header } from 'react-native-elements';

export default function ConnexionScreen({ navigation }) {
  return (
    <View style={{ flex: 1 }}>
      <StatusBar
        backgroundColor="#B5F7D3"
        barStyle="dark-content" // 浅绿背景搭配深色状态栏文字更清晰，如需白色文字可改为light-content
      />
      <Header
        containerStyle={{ backgroundColor: '#B5F7D3' }}
        leftComponent={{
          icon: 'menu',
          color: '#fff',
          iconStyle: { color: '#fff' },
        }}
        centerComponent={{ text: 'NURISENS', style: { color: '#fff' } }}
        rightComponent={{ icon: 'home', color: '#fff' }}
        barStyle="light-content"
      />
      <View
        style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: 'green',
        }}>
        <Text>Connexion Screen</Text>
        <Button
          title="Valider la connexion"
          onPress={() => navigation.navigate('Home')}
        />
      </View>
    </View>
  );
}

方案2：通过Header内置属性配置（更简洁） #

react-native-elements的Header组件内置了statusBarProps属性，可直接传递状态栏配置，无需单独引入StatusBar组件：

<Header
  statusBarProps={{
    backgroundColor: '#B5F7D3',
    barStyle: 'dark-content'
  }}
  containerStyle={{ backgroundColor: '#B5F7D3' }}
  leftComponent={{
    icon: 'menu',
    color: '#fff',
    iconStyle: { color: '#fff' },
  }}
  centerComponent={{ text: 'NURISENS', style: { color: '#fff' } }}
  rightComponent={{ icon: 'home', color: '#fff' }}
  barStyle="light-content"
/>

方案3：全局配置状态栏（所有页面生效） #

如果所有页面都需要使用同一款状态栏样式，可以直接在App.js入口文件配置，在NavigationContainer外层添加全局StatusBar配置，一次修改全应用生效：

import { StatusBar } from 'react-native';

export default function App() {
  const Stack = createNativeStackNavigator();

  return (
    <>
      <StatusBar backgroundColor="#B5F7D3" barStyle="dark-content" />
      <NavigationContainer>
        <Stack.Navigator
          initialRouteName="Connexion"
          screenOptions={{ headerShown: false }}>
          <Stack.Screen name="Connexion" component={ConnexionScreen} />
          <Stack.Screen name="Home" component={HomeScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
}

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