我是个新来的本地人.我正在try 为我的应用程序设置一些全局标题样式,但它不起作用

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' },
}

正如这里提到的possible alternative

但我想从route.js岁开始实现同样的目标

我也试过defaultNavigationOptions,就像docs中提到的那样

但是没有运气!!

推荐答案

我认为您使用的是react-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

React-native相关问答推荐

NativeWind边框 colored颜色 在Reaction Native应用程序中未按预期工作

我们如何才能将我们自己的应用程序(IOS)排除在共享表中?

react 本机 TextInput 将其他元素移出屏幕

使用动画标记时如何优化react 本机 map 性能

任务:react-native-async-storage_async-storage:generateDebugRFile FAILED

React Native:在ScrollView中更改焦点时键盘关闭

react-native 中的layout-only view removal优化是什么?

如何重置react-native 动画?

@react-navigation/stack 与 @react-navigation/native-stack 有什么区别?

如何在 React Native 中按下按钮时更改文本值?

Typescript:onPress 类型

为什么,确切地说,我们需要 React.forwardRef?

React Native vs Swift/Objective-C/Java Native

FlatList vs map react-native

Ipad 上的 React Native - 错误 - could not connect to development server

React Native 无法运行堆栈跟踪

如何在 React Native 中使用 index.js 而不是 (index.ios.js, index.android.js) 进行跨平台应用程序?

zoom 到指定的标记 react-native-maps

在 componentWillUnmount 中清除超时的更好方法

react-native-webview :对于 iOS 文本太小