React Native, change React Navigation header styling

前端 未结 5 437
孤街浪徒
孤街浪徒 2021-02-01 19:54

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

/         


        
相关标签:
5条回答
  • 2021-02-01 20:23

    Try this working code

    static navigationOptions = {
          title: 'Home',
          headerTintColor: '#ffffff',
          headerStyle: {
            backgroundColor: '#2F95D6',
            borderBottomColor: '#ffffff',
            borderBottomWidth: 3,
          },
          headerTitleStyle: {
            fontSize: 18,
          },
      };
    
    0 讨论(0)
  • 2021-02-01 20:28

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

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

    Deprecated answer:

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

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

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

    0 讨论(0)
  • 2021-02-01 20:29

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

    Header Before DrawerItems:

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

    Footer After DrawerItems:

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

    0 讨论(0)
  • 2021-02-01 20:31

    Try this code:

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

    good luck!

    0 讨论(0)
  • 2021-02-01 20:45

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

    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

    0 讨论(0)
提交回复
热议问题