如何在 React Native 中更改完整标题的背景颜色答案

【问题标题】：How can I change the background color of the full header in React Native如何在 React Native 中更改完整标题的背景颜色
【发布时间】：2021-09-23 09:57:47
【问题描述】：

我使用的是 react-native-elements 的 Header 组件，默认为蓝色背景。我将其更改为绿色，但标题的上半部分（包含您手机的信息，如小时和 wifi）保持蓝色。

Header in two colors

谁能解释我如何修改这部分标题，所以请全部显示为浅绿色？

这是我的 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>
  );
}

【问题讨论】：

直接在 Header 组件中添加 backgroundColor 效果很好，感谢你们！

标签： react-native react-native-elements

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

import { StatusBar } from 'react-native'

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

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

希望这对你有用。

【讨论】：