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

Question

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

正如这里提到的possible alternative

但我想通过我的route.js实现同样的目标

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

但是没有运气！！

Answer 1

elevation: 0 在 Android 10 中不起作用。其他安卓版本也可以。 它是透明标题的变化。

Answer 2

要设置自定义反应导航，您需要首先在 App.js 中定义 option.navigations 或 option.defaultNavigationOptions

App.js

 <Stack.Screen
                 name="ListeMedocItemScreen"
                 component={ListeMedocItemScreen}
                 options={ListeMedocItemScreen.defaultNavigationOptions} // ListeMedocItemScreen.navigationOptions

  />

然后在您的组件页面中

如果你使用钩子

const ListeMedocItem = (props) =>{
  //some component
}


ListeMedocItem.defaultNavigationOptions = ({navigation}) => {

  return {
    title: 'My home',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },

 }}

或者如果你使用 React.Components

static navigationOptions = ({ navigation }) => {
    //return header with Custom View which will replace the original header 
    return {
      header: (
        <View
          style={{
            height: 45,
            marginTop: 20,
            backgroundColor: 'red',
            justifyContent: 'center',
          }}>
          <Text
            style={{
              color: 'white',
              textAlign: 'center',
              fontWeight: 'bold',
              fontSize: 18,
            }}>
            This is Custom Header
          </Text>
        </View>
      ),
    };
  };

Answer 3

只需将您的 navigationOptions 更改为 defaultNavigationOptions 它会正常工作

谢谢！

Answer 4

您需要使用defaultNavigationOptions。

诚然，他们甚至没有在文档中提到他们在 v2 和 v3 之间进行了更改！

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

Answer 5

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