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
clipboard.png


const TabNavigator = createBottomTabNavigator ({
Feed: FeedScreen,
Profile: ProfileScreen,
});

TabNavigator.navigationOptions = ({navigation}) = > {
let {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 = routeName;

return {

headerTitle,

};
};

https://reactnavigation.org/d.


read the solution of the official website posted by my friend upstairs. It's been taken care of. I hope future generations can enjoy the cool.
means two stacks, and it certainly won't work if you write navigationOptions into it, because only the configuration of the child nodes will be checked.

"So we can set the headerTitle on the TabNavigator instead"

solution, go directly to the code:

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
  }
})
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1eb07ee-22dc.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1eb07ee-22dc.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?