DrawerNavigation - 无法更改标题颜色

Question

我正在使用一个反应原生应用程序，并使用DrawerNavigator。遗憾的是我无法更改标题的颜色，我的SideMenu组件如下所示：

＆＃13;

＆＃13;

import React from 'react';
import {
  TouchableHighlight,
  View,
  ScrollView,
  Image,
  Platform,
  StyleSheet
} from 'react-native';
import {NavigationActions} from 'react-navigation';
import {
  RkStyleSheet,
  RkText,
  RkTheme
} from 'react-native-ui-kitten';
import { MainRoutes } from '../routes/routes';
import { MaterialCommunityIcons } from 'react-native-vector-icons';
import { connect } from 'react-redux';

const mapStateToProps = (state) => {
  return {
  }
}

class SideMenu extends React.Component {

  static navigationOptions = ({navigation}) => {
    const { state, setParams } = navigation;
    return {
      headerTintColor: 'red',
      headerLeft: null,
      headerStyle: { backgroundColor: 'rgba(77, 90, 139, 1)', shadowColor: 'transparent', borderBottomWidth: 0},
    };
  };

  constructor(props) {
    super(props);
    this._navigateAction = this._navigate.bind(this);
  }

  _navigate(route) {
    let resetAction = NavigationActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({routeName: route.id})
      ]
    });
    this.props.navigation.dispatch(resetAction)
  }

  _renderIcon() {
    // if (RkTheme.current.name === 'light')
    //   return <Image style={styles.icon} source={require('../../assets/images/smallLogo.png')}/>;
    // return <Image style={styles.icon} source={require('../../assets/images/smallLogoDark.png')}/>

  }

  handlePress = (route, index) => {
    const { navigation } = this.props;
    navigation.navigate(route.id);
  }

  render() {
    let menu = MainRoutes.map((route, index) => {
      return (
        <TouchableHighlight
          style={styles.container}
          key={route.id}
          underlayColor={RkTheme.current.colors.button.underlay}
          activeOpacity={1}
          onPress={() => this.handlePress(route, index)}>
          <View style={styles.content}>
            <View style={styles.content}>
              <MaterialCommunityIcons size={25} style={{color: 'white'}} name={route.icon} />
              <View style={{flex: 1, alignItems: 'left', paddingLeft: 15}}>
              <RkText style={{color:'white'}}>{route.title}</RkText>
              </View>
            </View>

          </View>
        </TouchableHighlight>
      )
    });

    return (
      <View style={styles.root}>
        <ScrollView
          showsVerticalScrollIndicator={false}>
          <View style={[styles.container, styles.content], {borderTopWidth: 0}}>
            {this._renderIcon()}
          </View>
          {menu}
        </ScrollView>
      </View>
    )
  }
}

let styles = RkStyleSheet.create(theme => ({
  container: {
    height: 80,
    paddingHorizontal: 16,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderColor: 'white',
    backgroundColor: 'rgba(77, 90, 139, 1)'
  },
  root: {
    paddingTop: Platform.OS === 'ios' ? 20 : 0,
    backgroundColor: 'rgba(77, 90, 139, 1)'
  },
  content: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center'
  },
  icon: {
    marginRight: 13,
  }
}));

export default connect(mapStateToProps)(SideMenu);

＆＃13;

＆＃13;

＆＃13;

正如您所看到的，我在NavigationOptions中设置标题的样式，就像我对其他组件一样，但标题保持相同的颜色。

这可能是因为DrawerNavigator嵌套在TabNavigator中吗？

非常感谢，非常感谢。

导航器的定义如下：

＆＃13;

＆＃13;

onst SettingsDrawerNavigator = DrawerNavigator(
  {
    SettingsScreen: {
      screen: SettingsScreen
    }
  },
  {
    //initialRouteName: 'SettingsScreen',
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle',
    
    contentComponent: (props) => <SideMenu {...props}/>
  }
);


export default TabNavigator(
  //Adds elements to the navigator at the bottom.
  {
    //Other tabs.
    Account: {
      screen: SettingsDrawerNavigator,
    }
  },
  {
    navigationOptions: ({ navigation }) => ({
      initialRouteName: 'Home',
      tabBarIcon: ({ focused }) => {
        const { routeName } = navigation.state;
        let iconName;
        return (
          // <Button badge vertical>
          //   <Badge ><Text>51</Text></Badge>
            <Ionicons
              name={iconName}
              size={24}
              style={{ marginBottom: -3 }}
              color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
            />
          // </Button>
        );
      },
    }),
    tabBarOptions: {
      inactiveBackgroundColor: 'transparent',
      activeBackgroundColor: 'transparent',
      showLabel: false,
      style: {
        backgroundColor: '#4d5a8b',
      }
    },
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false
  }
);

＆＃13;

＆＃13;

＆＃13;

向DrawerNavigator添加标题会导致以下结果（红色）。我试图将顶部的白色背景设置为红色。