我的 headerStyle 不起作用。 我试图分配背景颜色，但在我运行它时它没有出现

Question

My headerStyle doesn't work. I have tried to assign a background color though it doesn't appear when I run it. I have given a blue color to backgroundColor in headerStyle. though it isn't working. I have tried everything but it doesn't work. I am fairly new to reactNative so cannot figure out the bug.

import React, { Component } from 'react';
import Menu from './MenuComponent';
import Dishdetail from './DishdetailComponent';
import Home from './HomeComponent.js';
import Contact from './ContactComponent.js';
import About from './AboutComponent.js';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createDrawerNavigator } from 'react-navigation-drawer';
import { Icon } from 'react-native-elements';

const MenuNavigator = createStackNavigator({
  Menu: 
  { screen: Menu,
    navigationOptions: ({ navigation }) => ({
      headerLeft: <Icon name="menu" size={24} 
        color= 'blue'
        onPress={ () => navigation.toggleDrawer() } />          
    }) 
  },
  Dishdetail: { screen: Dishdetail }
},
{
  initialRouteName: 'Menu',
  navigationOptions: {
      headerStyle: {
          backgroundColor: "#512DA8"
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
          color: "#fff"            
      }
  }
}
);

const HomeNavigator = createStackNavigator({
  Home: { screen: Home }
}, {
  navigationOptions: ({ navigation }) => ({
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  })
});

const ContactNavigator = createStackNavigator({
  Contact: { screen: Contact }
}, 
{
  navigationOptions: ({ navigation }) => ({
    headerStyle: {
        backgroundColor: "#512DA8"
    },
    headerTitleStyle: {
        color: "#fff"            
    },
    headerLeft: <Icon name = 'menu' size = {24} 
        color = 'blue'
        onPress = {() => navigation.toggleDrawer()}
        />,
    headerTintColor: "#fff"  
  })
});

const AboutNavigator = createStackNavigator({
  About: { screen: About }
}, 
{
  navigationOptions: ({ navigation }) => ({
    headerStyle: {
        backgroundColor: "blue"
    },
    headerTitleStyle: {
        color: "#fff"            
    },
    headerLeft: <Icon name = 'menu' size = {24} 
        color = 'blue'
        onPress = {() => navigation.toggleDrawer()}
        />,
    headerTintColor: "blue"  
  })
});

const MainNavigator = createDrawerNavigator({
  Home: { 
      screen: HomeNavigator,
      navigationOptions: {
        title: 'Home',
        drawerLabel: 'Home',
        drawerIcon: ({tintColor}) => (
          <Icon 
            name='home' 
            type='font-awesome'
            size = {24}
            color = {tintColor}
          />
        )
      }
    },
  About: { 
      screen: AboutNavigator,
      navigationOptions: {
        title: 'About Us',
        drawerLabel: 'About Us',
        drawerIcon: ({tintColor}) => (
          <Icon 
            name='info-circle' 
            type='font-awesome'
            size = {24}
            color = {tintColor}
          />
        )
      }, 
    },
  Menu: { 
      screen: MenuNavigator,
      navigationOptions: {
        title: 'Menu',
        drawerLabel: 'Menu',
        drawerIcon: ({tintColor}) => (
          <Icon 
            name='list' 
            type='font-awesome'
            size = {24}
            color = {tintColor}
          />
        )
      }, 
    },
  Contact: { 
      screen: ContactNavigator,
      navigationOptions: {
        title: 'Contact Us',
        drawerLabel: 'Contact Us',
        drawerIcon: ({tintColor}) => (
          <Icon 
            name='address-card' 
            type='font-awesome'
            size = {22}
            color = {tintColor}
          />
        )
      }, 
    }
}, {
drawerBackgroundColor: '#D1C4E9'
});

const Main = createAppContainer(MainNavigator);

export default Main;

Answer 1

Depending on what version of React Native you are using the issue could be with navigationOptions . If you are using v3 you need to use defaultNavigationOptions instead.

defaultNavigationOptions: ({ navigation }) => ({
    headerStyle: {
        backgroundColor: "blue"
    },
    ...
}

Answer 2

I am currently facing the same issue... React native v0.70.5 expo managed project created with typescript.

in my case, only background color works every other style property isn't expected to be props of header style, I looked into their package, and here's what I found...

headerStyle?: StyleProp<{
    backgroundColor?: string;
}>;

in this file.. node_modules@react-navigation\native-stack\src\types.tsx

for me the most reasonable solution is to add the properties as defined above.

So I've added the styles I need...

  headerStyle?: StyleProp<{
    backgroundColor?: string;
    borderBottomWidth: number,
    shadowColor: string,
    shadowOpacity: number,
    elevation: number,
    height: number
 }>;

or you could just say:

  headerStyle?: StyleProp<ViewStyle>;

You might need to restart vscode though before the changed reflect... but this solved it for me.