web-dev-qa-db-ja.com

React native：navigationOptionsのヘッダースタイルが機能しない

私は反応ネイティブにかなり新しいです。アプリにいくつかのグローバルヘッダースタイルを設定しようとしていますが、機能していません

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;

今、私は自分のクラスコンポーネントでこのようなことを行うことができることを知っています

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

ここで言及されているように 可能な代替

しかし、私は私のroute.js

docs で言及されているようにdefaultNavigationOptionsも試しました

しかし、運はありません!!

reactjsreact-nativereact-navigation
9
Nauman Tanwir

反応ナビゲーションバージョン3を使用していると思います。その場合、navigationOptionsはdefaultNavigationOptionsに変更されます。

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

}

動作するはずです。 https://snack.expo.io/ByGrHdAC7

13
Aung Myat Hein

defaultNavigationOptionsを使用する必要があります。

確かに、ドキュメントではv2とv3の間で変更したことすら言及していませんでした！

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

1
Christopher Agnus Lam