如何设置每个活动标签页的标题样式和标题？

Question

我正在使用“下面的代码”在我的应用程序中创建一个底部的Tab，效果很好。现在，我想要的是您所需要的，如下面的屏幕截图所示。Header显示为空白。我想更改页眉的背景颜色，并且还想显示每个活动的选项卡名称。我该如何实现？

Home.js

import React from 'react';
import { StyleSheet, Text, View, Button, StatusBar, Image, Alert } from 'react-native';
import BottomNavigation, { FullTab, Badge } from 'react-native-material-bottom-navigation';
import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';
import Icon from '@expo/vector-icons/MaterialCommunityIcons';
import Dashboard from './Dashboard';
import Leave from './Leave';
import Hour_Rec from './Hour_Rec';
import Rest_Holiday from './Rest_Holiday';
import Report from './Report';

    const Home = createBottomTabNavigator({

        Leave: {
            screen: Leave,
            navigationOptions: { 
                tabBarLabel: "Leave",
                tabBarIcon: ({ tintColor }) => (
                    <Icon
                        name="movie"
                        size={17}
                        color={tintColor} />
                )
            }
        },
        Dashboard: {
            screen: Dashboard,
            navigationOptions: {
                title: "Dashboard",
                tabBarIcon: ({ tintColor }) => (
                    <Icon
                        name="gamepad-variant"
                        size={17}
                        color={tintColor} />
                )
            }
        },
        Hour_Rec: {
            screen: Hour_Rec,
            navigationOptions: {
                tabBarLabel: "HR",
                tabBarIcon: ({ tintColor }) => (
                    <Icon
                        name="music-note"
                        size={17}
                        color={tintColor} />
                )
            }
        },
        Rest_Holiday: {
            screen: Rest_Holiday,
            navigationOptions: {
                tabBarLabel: "RH",
                tabBarIcon: ({ tintColor }) => (
                    <Icon
                        name="gamepad-variant"
                        size={17}
                        color={tintColor} />
                )
            }
        },
        Report: {
            screen: Report,
            navigationOptions: {
                tabBarLabel: "Report",
                tabBarIcon: ({ tintColor }) => (
                    <Icon
                        name="music-note"
                        size={17}
                        color={tintColor} />
                )
            }
        }
    });

Dashboard.js

import React, { PureComponent } from 'react';
import { AppRegistry, StyleSheet, TouchableOpacity, View, Text, TextInput, Button, Picker, 
        ActivityIndicator, CheckBox } from 'react-native';
import styles from './source/component/style';
import { DatePickerDialog } from 'react-native-datepicker-dialog';
import moment from 'moment';

class Dashboard extends PureComponent {

      static navigationOptions = ({ navigation }) => ({
            title: "CPU",
            headerStyle: {
                backgroundColor: "#03A9F4"

        },
        headerTintColor: "#fff",
        headerTitleStyle: {
          fontWeight: "bold"
        }
        })

      render() {
        return (

          <View style={styles.container}>
                <View style={[styles.box, styles.box1]}>
                  <Text style={{ fontSize: 40, color:'#fff' }}>Active Leave</Text>
                </View>
                <View style={[styles.box, styles.box2]}>
                  <Text style={{ fontSize: 40, color:'#fff' }}>Upcoming Leave</Text>
                </View>
                <View style={[styles.box, styles.box3]}>
                  <Text style={{ fontSize: 40, color:'#fff' }}>Absent status</Text>
                </View>
            </View>
        );
      }
    }