React native: styles d'en-tête dans les options de navigation ne fonctionnent pas

Question

Je suis assez nouveau pour réagir natif. J'essaie de définir des styles d'en-tête globaux pour mon application, mais cela ne fonctionne pas

route.js

import React, { Component } from 'react';
import { View } from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation";
import SplashScreen from '../screens/SplashScreen';
import CalendarScreeen from '../screens/CalendarScreen';

const NavStack = createStackNavigator(
    {
        Splash: {
            screen: SplashScreen,
            navigationOptions: {
                header: null
            },
        },
        Calendar: {
            screen: CalendarScreeen,
            navigationOptions: {
                title: 'Calendar',
            },
        },
    },
    {
        initialRouteName: 'Calendar',
        navigationOptions: {
            headerStyle: {
                backgroundColor: '#28F1A6',
                elevation: 0,
                shadowOpacity: 0
            },
            headerTintColor: '#333333',
            headerTitleStyle: {
                fontWeight: 'bold',
                color: '#ffffff'
            }
        }

    }

);

const Routes = createAppContainer(NavStack);
export default Routes;

Maintenant, je suis conscient que je peux faire quelque chose comme ça dans mon composant de classe

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

comme il est mentionné ici alternative possible

mais je veux obtenir la même chose de mon route.js

J'ai également essayé defaultNavigationOptions comme son mentionné dans docs

Mais pas de chance !!

Answer 1

Je pense que vous utilisez Reaction Navigation version 3. Si c'est le cas navigationOptions est changé en defaultNavigationOptions .

{
        initialRouteName: 'Calendar',
        defaultNavigationOptions: {
            headerStyle: {
                backgroundColor: '#28F1A6',
                elevation: 0,
                shadowOpacity: 0
            },
            headerTintColor: '#333333',
            headerTitleStyle: {
                fontWeight: 'bold',
                color: '#ffffff'
            }
        }

}

Ça devrait marcher. https://snack.expo.io/ByGrHdAC7

Answer 2

Vous devez utiliser defaultNavigationOptions.

Certes, ils n'ont même pas mentionné qu'ils l'avaient changé entre v2 et v3 dans la documentation!

https://reactnavigation.org/docs/en/stack-navigator.html