如何在 React Native 中更改导航 header 颜色？

Question

如何在 React Native 应用程序中更改导航 header 的颜色？

我尝试初始化背景颜色，但没有成功。

下面是我的 navigationOptions 代码片段：

static navigationOptions = ({ navigation }) => ({
    header: props => <Header 
        navigation={navigation}
        title={'Dashboard'}
        toggleDrawer
    />
})

另外，是否可以设置状态栏颜色？

Answer 1

您可以使用 headerStyle 更改它：

navigationOptions = {
  headerStyle: {
    backgroundColor: 'red',
  },
);

状态栏见https://facebook.github.io/react-native/docs/statusbar.html

Answer 2

您可以使用以下参数设置状态栏颜色：

<StatusBar backgroundColor='blue' barStyle='light-content' />

Answer 3

这样使用：

static navigationOptions = () => ({
    title: 'Home',
    headerTintColor: '#cccccc',
    headerStyle: {
      backgroundColor: '#000',
    },      
  });