时间戳

首页 > 解决方案 > 反应原生：navigationOptions 中的标题样式不起作用

reactjs - 反应原生：navigationOptions 中的标题样式不起作用

问题描述

我对 react-native 很陌生。我正在尝试为我的应用程序设置一些全局标题样式，但它不起作用

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

我也尝试过像文档defaultNavigationOptions中提到的那样

但是没有运气！！

标签： reactjsreact-nativereact-navigation

解决方案

我认为您使用的是反应导航版本 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

推荐阅读