Javascript React Native，更改 React Navigation 标题样式

React Native, change React Navigation header styling

提问by cssko

I'm implementing React Navigationin my React Native app, and I'm wanting to change the background and foreground colors of the header. I have the following:

我正在我的 React Native 应用程序中实现React Navigation，我想更改标题的背景和前景色。我有以下几点：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { StackNavigator } from 'react-navigation';

export default class ReactNativePlayground extends Component {

  static navigationOptions = {
    title: 'Welcome',
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

const SimpleApp = StackNavigator({
  Home: { screen: ReactNativePlayground }
});

AppRegistry.registerComponent('ReactNativePlayground', () => SimpleApp);

By default the background color of the heading is white, with a black foreground. I've also looked at the documentation for React Navigation but I'm not able to find where it shows how to set the styling. Any help?

默认情况下，标题的背景颜色为白色，前景为黑色。我还查看了 React Navigation 的文档，但找不到它显示如何设置样式的位置。有什么帮助吗？

回答by cssko

In newer versions of React Navigation you have a flatter settings object, like below:

在较新版本的 React Navigation 中，您有一个更扁平的设置对象，如下所示：

static navigationOptions = {
  title: 'Chat',
  headerStyle: { backgroundColor: 'red' },
  headerTitleStyle: { color: 'green' },
}

Deprecated answer:

弃用的答案：

Per the docs, here, you modify the navigationOptions object. Try something like:

根据文档，here修改 navigationOptions 对象。尝试类似：

static navigationOptions = {
    title: 'Welcome',
    header: {
        style: {{ backgroundColor: 'red' }},
        titleStyle: {{ color: 'green' }},
    }
}

Please don't actually end up using those colors though!

不过，请不要实际上最终使用这些颜色！

回答by Vishal Dhaduk

According to documentation you can use "navigationOptions" style like this.

根据文档，您可以像这样使用“navigationOptions”样式。

static navigationOptions = {
  title: 'Chat',
  headerStyle:{ backgroundColor: '#FFF'},
  headerTitleStyle:{ color: 'green'},
}

For more info about navigationOptions you can also read from docs:-

有关导航选项的更多信息，您还可以从文档中阅读：-

https://reactnavigation.org/docs/navigators/stack#Screen-Navigation-Options

https://reactnavigation.org/docs/navigators/stack#Screen-Navigation-Options

回答by Sedric Heidarizarei

Notice! navigationOptionsis differences between Stack Navigationand Drawer Navigation
Stack Navigation Solved.
But for Drawer Navigation you Can add Your own Header and Make Your Styles with contentComponentConfig:
First import { DrawerItems, DrawerNavigation } from 'react-navigation'Then

注意！ 解决了与堆栈导航navigationOptions之间的差异。 但是对于抽屉导航，您可以添加您自己的标题并使用Config 创建您的样式： 首先然后Stack NavigationDrawer Navigation

contentComponent
import { DrawerItems, DrawerNavigation } from 'react-navigation'

Header Before DrawerItems:

标题之前DrawerItems：

contentComponent: props => <ScrollView><Text>Your Own Header Area Before</Text><DrawerItems {...props} /></ScrollView>.

contentComponent: props => <ScrollView><Text>Your Own Header Area Before</Text><DrawerItems {...props} /></ScrollView>.

Footer After DrawerItems:

页脚之后DrawerItems：

contentComponent: props => <ScrollView><DrawerItems {...props} /><Text>Your Own Footer Area After</Text></ScrollView>.

contentComponent: props => <ScrollView><DrawerItems {...props} /><Text>Your Own Footer Area After</Text></ScrollView>.

回答by omprakash8080

Try this working code

试试这个工作代码

static navigationOptions = {
      title: 'Home',
      headerTintColor: '#ffffff',
      headerStyle: {
        backgroundColor: '#2F95D6',
        borderBottomColor: '#ffffff',
        borderBottomWidth: 3,
      },
      headerTitleStyle: {
        fontSize: 18,
      },
  };

回答by Daniel Agus Sidabutar

Try this code:

试试这个代码：

static navigationOptions = {
    headerTitle: 'SignIn',
    headerTintColor: '#F44336'
};

good luck!

祝你好运！