Навигация по значку заголовка не работает при реагирующей навигации (React Native)

Question

Приложение My React Native состоит из TabNavigator, который вложен в StackNavigator, который является точкой входа в маршрутизацию приложения.

В StackNavigator у меня также есть экран для About, который я хочубудет отображаться при нажатии значка в заголовке.TabNavigator работает должным образом, однако нажатие на значок ничего не делает и не выдает никакой ошибки.У кого-нибудь есть идеи, что мне не хватает?

Это код:

import { Icon } from 'native-base';
import React, { Component } from 'react';
import { createTabNavigator, createStackNavigator } from 'react-navigation';
import { View } from 'react-native';

import HomeTab from './tabs/HomeTab';
import HistoryTab from './tabs/HistoryTab';
import AboutScreen from './AboutScreen';

export default class Main extends Component {
  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: 'Find Phone Country',
      headerStyle: {
        backgroundColor: '#C62828'
      },
      headerMode: 'screen',
      headerTintColor: '#FFFFFF',
      headerTitleStyle: {
        fontWeight: 'bold',
        justifyContent: 'space-between',
        alignSelf: 'center',
        textAlign: 'center',
        flex: 1,
        flexGrow: 1
      },
      headerRight: (
        <Icon
          name="ios-help-circle-outline"
          style={{ paddingRight: 16, color: 'white' }}
          onPress={() => navigation.navigate('About')}
        />
      ),
      headerLeft: <View />
    };
  };

  render() {
    return <RootStack />;
  }
}

const MainTabNavigator = createTabNavigator(
  {
    Home: {
      screen: HomeTab
    },
    History: {
      screen: HistoryTab
    }
  },
  {
    animationEnabled: true,
    swipeEnabled: true,
    tabBarPosition: 'bottom',
    tabBarOptions: {
      showIcon: true,
      showLabel: true,
      upperCaseLabel: false,
      allowFontScaling: true,
      indicatorStyle: {
        opacity: 0
      },
      style: {
        backgroundColor: '#C62828'
      },
      activeTintColor: '#ffffff',
      inactiveTintColor: '#e0e0e0'
    }
  }
);

const RootStack = createStackNavigator({
  Main: {
    screen: MainTabNavigator,
    navigationOptions: () => ({
      title: 'Main',
      headerBackTitle: null,
      header: null
    })
  },
  About: {
    screen: AboutScreen,
    navigationOptions: () => ({
      title: 'About',
      headerBackTitle: 'Back'
    })
  }
});

Спасибо

Answer 1

Иконка из native-base не имеет реквизита с именем onPress.Попробуйте инкапсулировать ваш значок в соответствующий компонент для захвата касания, например:

headerRight: (
    <TouchableWithoutFeedback onPress={() => navigation.navigate('About')}> 
      <Icon
        name="ios-help-circle-outline"
        style={{ paddingRight: 16, color: 'white' }}
      />
    </TouchableWithoutFeedback>
  ),

и не забудьте при импорте:

import { View, TouchableWithoutFeedback } from 'react-native';