Навигация по вложенным экранам путем нажатия изображения в заголовке

Question

Я пытаюсь выполнить маршрутизацию между двумя вложенными экранами: HomeScreen.js а также MessageScreen.js. Оба они вложены в один и тот же навигатор стека вApps.js.

Я хочу перейти от Home.js к MessageScreen.js нажатием изображения в Home.jsзаголовок. Однако появляется сообщение об ошибке: "TypeError: undefined не является объектом (оценка HomeScreen. Это код заголовка вHome.js:

...
export default class HomeScreen extends React.Component{ 

  static navigationOptions = () => ({
    title:'As minhas viagens',
    headerTintColor:'black',
    headerRight: ()=>  
        <TouchableOpacity onPress={() => this.props.navigation.navigate('MessageScreen')}>
            <Image 
            source={require("../assets/message.png")} 
            style={{width: 40,height: 40, borderRadius: 40 / 2}}/>
        </TouchableOpacity>
});
...

И это Stack Navigator, вложенный в Bottom Tab Navigator в App.js:

...
const HomeStack = createStackNavigator({
  HomeScreen: {
    screen: HomeScreen,
    navigationOptions: () => ({
        headerShown: true
    })
  },
  MessageScreen: {
    screen: MessageScreen,
    navigationOptions: () => ({
      headerShown: true
    })
  }
});

const AppContainer = createBottomTabNavigator (
      {
        Home: {
          screen: HomeStack,
          navigationOptions: {
            tabBarIcon: ({ tintColor }) => <Ionicons name='ios-locate' size={24} color={tintColor}/>
          }
        },
...