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

Question

我的 headerStyle 不起作用。 我试图分配背景颜色，但在我运行它时它没有出现。 我在 headerStyle 中为 backgroundColor 赋予了蓝色。 虽然它不工作。 我已经尝试了一切，但没有用。 我是 reactNative 的新手，所以无法找出错误。

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

根据您使用的 React Native 版本，问题可能与navigationOptions有关。 如果您使用的是 v3，则需要改用defaultNavigationOptions 。

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

Answer 2

我目前面临同样的问题... React native v0.70.5 expo 托管项目使用 typescript 创建。

在我的例子中，只有背景颜色起作用，其他样式属性预计不会成为 header 样式的道具，我查看了他们的 package，这就是我发现的...

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

在这个文件中.. node_modules@react-navigation\native-stack\src\types.tsx

对我来说，最合理的解决方案是添加上面定义的属性。

所以我添加了我需要的 styles ...

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

或者你可以说：

  headerStyle?: StyleProp<ViewStyle>;

您可能需要在更改反映之前重新启动 vscode...但这为我解决了。