Вызов функции на вкладке изменения в React Native

Question

У меня есть приложение React Native из навигатора вкладок из этой библиотеки: @react-navigation/bottom-tabs. При нажатии на вкладку должна быть вызвана функция этой вкладки. Эти функции реализованы в функции экранов, и я не знаю, как их вызвать.

Это пример кода одного из экранов:

import React, { useState, useEffect } from 'react';
import { Image, Platform, StyleSheet, Text } from 'react-native';
export default function HomeScreen() {

  const onTabFocus = () => {
    // do something
  };

  return (
    <View style={styles.container}>
      <Text>Home screen</Text>
    </View>
  );
};

HomeScreen.navigationOptions = {
  header: null,
};

И код навигатора вкладок:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import * as React from 'react';

import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';

const BottomTab = createBottomTabNavigator();
const INITIAL_ROUTE_NAME = 'Home';

export default function BottomTabNavigator({ navigation, route }) {
  navigation.setOptions({ headerTitle: getHeaderTitle(route) });

  return (
    <BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME}>
      <BottomTab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: 'Home',
          tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="ios-browsers" />,
        }}
      />
      <BottomTab.Screen
        name="Links"
        component={LinksScreen}
        options={{
          title: 'Links',
          tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="ios-clock" />,
        }}
      />
    </BottomTab.Navigator>
  );
}

function getHeaderTitle(route) {
  const routeName = route.state?.routes[route.state.index]?.name ?? INITIAL_ROUTE_NAME;

  switch (routeName) {
    case 'Home':
      return 'How to get started';
    case 'Links':
      return 'Links to learn more';
  }
}