如何在 React Native 中更改完整 header 的背景颜色

Question

我正在使用 react-native-elements 的 Header 组件，默认情况下它具有蓝色背景。我将其更改为绿色，但 header 的上半部分（带有您 phone 的信息，例如小时和 wifi）仍为蓝色。

Header in two colors

有人可以解释一下如何修改 header 的这一部分，以便所有部分都变成浅绿色吗？

这是我的 App() 代码：

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

  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Connexion"
        screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Connexion" component={ConnexionScreen} />
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

这是我的页面代码：

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

export default function ConnexionScreen({ navigation }) {
  return (
    <View style={{ flex: 1 }}>
      <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>
  );
}

Answer 1

试试这个 <Header backgroundColor="#B5F7D3" />

Answer 2

这是你的StatusBar。尝试将 backgroundColor: "#B5F7D3" 属性添加回 Header 组件。

如果状态栏的颜色没有改变，那么添加 StatusBar 组件，如下所示：

import { StatusBar } from 'react-native'

并且在 return 语句中，在 Header 组件之前像这样实现它。

<StatusBar barStyle = "light-content" hidden = {false} backgroundColor = "#B5F7D3" translucent = {true}/>

希望这对你有用。

如何在 React Native 中更改完整 header 的背景颜色

How can I change the background color of the full header in React Native

react-native

react-native-elements