react-navigation set header title is not working - react-native

Question

I create two tabs.
Here is my react-navigation configure setting:
navigator/index.ts
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import RootScreen from '../components/RootScreen';
import MainStack from './MainStack';
const RootStack = createSwitchNavigator(
{
RootScreen: RootScreen,
MainStack: MainStack
},
{
initialRouteName: 'RootScreen',
}
)
const AppContainer = createAppContainer(RootStack);
export default AppContainer;
navigator/MainStack.ts
import { createStackNavigator } from 'react-navigation-stack';
import TabsStack from './TabsStack'
const MainStack = createStackNavigator(
{
tabs: TabsStack,
},
{
// headerMode: 'none',
}
);
export default MainStack;
navigator/TabsStack.tsx
import React from 'react';
import { Image } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import HomeScreen from '../components/HomeScreen/HomeScreen';
import SettingScreen from '../components/SettingScreen/SettingScreen';
import LoveIcon from '../assets/image/heart.png';
const TabsStack = createBottomTabNavigator(
{
HomeScreen: {
screen: HomeScreen,
navigationOptions: {
title: 'Home',
tabBarLabel: 'HomeTab',
tabBarIcon: ({ focused, tintColor }) => {
return <Image {...with some props}/>
},
}
},
SettingScreen: {
screen: SettingScreen,
navigationOptions: {
tabBarLabel: 'STab',
tabBarIcon: ({ focused, tintColor }) => {
return <Image {...with some props}/>
},
}
},
},
{
tabBarOptions: {
showLabel: true,
activeTintColor: 'blue',
inactiveTintColor: 'black',
style: {
// with some style
}
},
}
);
export default TabsStack;
And I try to set header title on my HomeScreen.tsx by using static navigationOptions
import React from 'react';
import { View, Text } from 'react-native';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'HomeScreen Header',
};
render() {
return (
<View>
<Text>I am HomeScreen</Text>
</View>
);
}
}
export default HomeScreen;
My HomeScreen header shows tabs.
It looks like static navigationOptions is not working.
What's wrong with my react-navigation settings ?

Answer 1

Just use this way:
import React from 'react';
import { View, Text } from 'react-native';
class HomeScreen extends React.Component {
componentDidMount() {
this.props.navigation.setOptions({ title: 'HomeScreen Header' });
};
render() {
return (
<View>
<Text>I am HomeScreen</Text>
</View>
);
}
}
export default HomeScreen;