React Native中DrawerNavigation无法修改头部颜色问题求助

我太懂你这个困扰了！用DrawerNavigator的时候调整头部样式总是容易摸不着头绪，下面给你几个实用的解决思路，你可以挨个试试：

方法1：在DrawerNavigator配置中直接设置头部样式 #

这是最直接的方式，不管是给单个页面配置还是全局统一设置都适用。

单个页面单独配置 #

在创建DrawerNavigator时，给对应的screen添加navigationOptions，指定headerStyle：

import { DrawerNavigator } from 'react-navigation';

const AppDrawer = DrawerNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      // 设置头部背景色
      headerStyle: {
        backgroundColor: '#2196F3', // 替换成你想要的颜色值
      },
      // 可选：设置头部文字和图标的颜色
      headerTintColor: '#ffffff',
    }
  },
  // 其他页面同理...
}, {
  drawerWidth: 240,
  // 抽屉的其他配置项
});

全局统一配置 #

如果所有页面的头部颜色都要一致，可以在DrawerNavigator的第二个参数里设置defaultNavigationOptions：

const AppDrawer = DrawerNavigator({
  // 页面列表
}, {
  drawerWidth: 240,
  defaultNavigationOptions: {
    headerStyle: {
      backgroundColor: '#你的目标颜色',
    },
    headerTintColor: '#fff',
  }
});

方法2：检查页面组件内的static navigationOptions #

如果某个页面的头部颜色没生效，很可能是页面组件内部的static navigationOptions覆盖了全局配置。比如你在页面里写了：

class HomeScreen extends React.Component {
  static navigationOptions = {
    headerStyle: {
      backgroundColor: '#ffffff', // 这里会覆盖全局的颜色设置
    }
  }
  // ...其他代码
}

这时需要把这里的backgroundColor改成你想要的颜色，或者直接删掉这个局部配置，让全局样式生效。

方法3：动态修改头部样式（适合特殊场景） #

如果你需要根据页面状态动态调整头部颜色，可以在组件的生命周期里通过navigation.setParams来修改：

class SomeScreen extends React.Component {
  componentDidMount() {
    this.props.navigation.setParams({
      headerStyle: { backgroundColor: '#动态颜色值' }
    });
  }

  static navigationOptions = ({ navigation }) => ({
    headerStyle: navigation.getParam('headerStyle', { backgroundColor: '#默认颜色' })
  });
}

额外提醒：自定义头部组件的情况 #

如果你没有用Navigator自带的头部，而是自己写了自定义Header组件，那直接修改这个组件的样式即可。比如在你的Header组件里给外层View添加backgroundColor样式：

const CustomHeader = () => (
  <View style={{ backgroundColor: '#你的颜色', height: 56, justifyContent: 'center' }}>
    <Text style={{ color: '#fff', fontSize: 18 }}>标题</Text>
  </View>
);

内容的提问来源于stack exchange，提问作者SwimmingG