Вызов функции при смене вкладки 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';
}
}