React-Navigation navigatinOptions不显示

Question

在我的本机应用程序中，我编写了以下代码。但是导航标题不会显示在屏幕上。

import React, { Component } from 'react';
import { View, Text } from 'react-native';

import { NavigationHeader } from '../../components';

class LoginScreen extends Component {

   // Navigation options
   static navigationOptions = ({ navigation }) => {
      const { params = {} } = navigation.state;

      return {
          headerTitle: <NavigationHeader title='Authentication' />,
          headerTitleStyle: { 
              alignItems: "center", 
              alignSelf: "center" 
          },
          headerStyle: {
              paddingLeft: 10,
              paddingRight: 10,
              borderBottomWidth: 1,
              borderBottomColor: '#8D8D8D',
              backgroundColor: 'white',
              elevation: 0,
          }
      };
   }; 
   render() {
      return (
         <View>
            <Text>
               Login Screen
            </Text>
         </View>
      );
   }
}

export default LoginScreen;

这是我的package.json文件。

{
  "name": "TestApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.3",
    "react-native": "0.58.6",
    "react-navigation": "1.5.8"
  },
  "devDependencies": {
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "24.1.0",
    "jest": "24.1.0",
    "metro-react-native-babel-preset": "0.52.0",
    "react-test-renderer": "16.6.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

为什么这不能正常工作？我几个月前创建的应用程序也使用了相同的方法。我在这里做错什么了吗？谁能给我一些建议？