react-navigation set header title is not working

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;