react navigation header button function call withi

问题:

I have the following navigation config file. This config file use react navigation to create navigators. My question is how can i call a function from my navigation config file that is define is another component such as a separate screen competent. In the below code i want to be able to call the showAlert() from the header button of the Map route. Please note that the showAlert() is define in the Map screen component below my navigator config.

const Tabs = createBottomTabNavigator ({
        Map:{screen:MapScreen},
        Profile:{screen:ProfileScreen},
        Consent: { screen: ConsentScreen },
     },
        {



        tabBarOptions: {
             activeTintColor: 'tomato',
             inactiveTintColor: 'gray',
           }
      }


);


Tabs.navigationOptions = ({ navigation }) => {
  const { routes, index } = navigation.state;
  const navigationOptions = {};
if (routes[index].routeName === 'Map') {
   navigationOptions.headerRight= (
                               <Button
                                 onPress={routes.showAlert()}
                                 title="Search"
                                 color="#009688"
                                 backgroundColor="white"
                                 icon={{name:'search',color:'#009688'}}
                               />
                             );

}



 if (routes[index].routeName === 'Profile') {
    navigationOptions.headerRight= (
                            <Button
                              onPress={()=> navigation.navigate('settingaccount')}
                              title="Settings"
                              color="#009688"
                              backgroundColor="white"
                              icon={{name:'settings',color:'#009688'}}
                            />
                          );
     navigationOptions.headerLeft= (
                                 <Button
                                   onPress={()=> navigation.navigate('profileEdit')}
                                   title="Edit Profile"
                                    icon={{name:'account-circle',color:'#009688'}}
                                    color="#009688"
                                    backgroundColor="white"
                                    color="#009688"
                                 />
                               );


 }

 if(routes[index].routeName === 'Consent'||routes[index].routeName === 'Map'){
 navigationOptions.headerLeft= null

 }

  return navigationOptions;
}

//Screen component

class Map extends React.Component {

  showAlert() {
    Alert.alert('No Internet',
      'Check internet connection',
      [
        { text: 'OK', onPress: () => console.log('OK Pressed') },
      ],
      { cancelable: false }
    )
  }



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