React-navigation (nested routing) title bar blank after setting title

RN project, write a react-navigation component used by DEMO, for nested routing. After setting title in navigationOptions, the title bar of the simulator is blank and no error is reported.

bottom TabNavigator code:
import React from "react";
import {createBottomTabNavigator} from" react-navigation";
import Ionicons from "react-native-vector-icons/Ionicons";
import TestScreen from". / Test";
import SettingScreen from". / SettingScreen";

TestScreen.navigationOptions = {

title: "",
headerStyle: {
    backgroundColor: "-sharpf4511e",
},

};
export default createBottomTabNavigator (

{
    Home: {
        screen: TestScreen,
        navigationOptions: ({navigation}) => ({
            //tabBarLabel: "",
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={focused ? "ios-home" : "ios-home-outline"}
                    size={26}
                    style={{ color: tintColor }}
                />
            ),
        }),
    },
    Setting: {
        screen: SettingScreen,
        navigationOptions: {
            tabBarLabel: "",
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={focused ? "ios-add-circle" : "ios-add-circle-outline"}
                    size={26}
                    style={{ color: tintColor }}
                />
            ),
        }
    }
},{
    initialRouteName: "Home"
}

)

StackNavigator Code:
import React from "react";
import {

createBottomTabNavigator,
createStackNavigator,

} from "react-navigation";
import Ionicons from" react-native-vector-icons/Ionicons";
import HomeScreen from". / screen/HomeScreen";
import DetailScreen from". / screen/DetailScreen";
import SettingScreen from". / screen/SettingScreen";
import LoginScreen from".. / screen/LoginScreen";
import TestScreen from. / screen/Test";
import AuthenScreen from". / screen/AuthenScreen";
import IndexStack from". / screen/IndexStack";

export default createStackNavigator ({

Index: IndexStack,
Test: TestScreen,
Home: HomeScreen,
Detail: DetailScreen,
Login: LoginScreen,
Setting: SettingScreen,
Authen: AuthenScreen

}, {

initialRouteName: "Index"

})

Simulator header title bar is blank, setting properties are not rendered

import { createStackNavigator, } from 'react-navigation'; import BottomTabNavigator from './Components/alphaButtomNav' // BottomTabNavigator.navigationOptions = ({ navigation }) => { const { routeName } = navigation.state.routes[navigation.state.index]; // You can do whatever you like here to pick the title based on the route name let headerTitle = ""; if (routeName == "Home") { headerTitle = "" } else if (routeName == "Details") { headerTitle = "" } else if (routeName == "Diet") { headerTitle = "" } else if (routeName == "My") { headerTitle = "" } return { headerTitle, }; }; const App = createStackNavigator({ // Manifest.xml HomeTab: { screen: BottomTabNavigator }, Welcome: { screen: Guide }, Main: { screen: MainScreen, }, UserIndex: { screen: UserIndex } })