Как получить разные заголовки для каждой вкладки в React Native?

Question

Я работаю над приложением eBook / AudioBook. В настоящее время у меня есть три экрана, которые находятся внутри BottomTabNavigator, причем этот навигатор вложен в навигатор стека, поэтому я могу отображать заголовок:

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { createBottomTabNavigator } from "react-navigation-tabs";
import { Entypo, MaterialIcons } from "@expo/vector-icons";
import Header from "./src/components/Header";

import HomeScreen from "./src/screens/HomeScreen";
import ListenScreen from "./src/screens/ListenScreen";
import AccountScreen from "./src/screens/AccountScreen";

export const navigator = createStackNavigator(
  {
    mainFlow: createBottomTabNavigator(
      {
        Home: HomeScreen,
        Listen: ListenScreen,
        Account: AccountScreen,
      },
    ),
  },
  {
    defaultNavigationOptions: {
      headerTitle: () => <Header />,
      headerTitleAlign: "center",
    },
  }
);


HomeScreen.navigationOptions = {
  tabBarIcon: <Entypo name="home" size={30} />,
};

ListenScreen.navigationOptions = {
  tabBarIcon: <Entypo name="music" size={30} />,
};

AccountScreen.navigationOptions = {
  tabBarIcon: <MaterialIcons name="account-circle" size={30} />,
};

const App = createAppContainer(navigator);

export default () => {
  return <App />;
};

Я создал собственный заголовок, но он не меняется как go tab-to-tab. Есть ли способ это исправить?