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

В React Native приложении есть tabbar из следующей библиотеки: @react-navigation/bottom-tabs. Когда вкладка меняется, нужно вызвать функцию, которая определена в функции экрана, на который был совершён переход. То есть, пользователь переходит с домашнего экрана на экран контактов, и в этот момент должна быть вызвана функция, принадлежащая вкладке контактов. Как это можно сделать, если tabbar и экраны определены в разных файлах?

Пример одного из экранов:

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,
};

Код tabbar'a:

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';
  }
} 

Ответы (0 шт):