React Native Navigation — популярная библиотека, используемая для построения потоков навигации в приложениях React Native. Одним из распространенных требований при разработке мобильных приложений является определение текущего активного экрана. В этой статье мы рассмотрим различные методы выполнения этой задачи, а также примеры кода. Давайте погрузимся!

Метод 1: использование NavigationState React Navigation

import { useNavigation } from '@react-navigation/native';
const MyComponent = () => {
  const navigation = useNavigation();
  const currentScreen = navigation.getCurrentRoute().name;
  // Rest of the component code
}

Метод 2: использование прослушивателей событий React Navigation

import { useFocusEffect } from '@react-navigation/native';
const MyComponent = () => {
  useFocusEffect(() => {
    const currentScreen = navigation.getCurrentRoute().name;
    // Rest of the component code
    return () => {
      // Cleanup code (if necessary)
    };
  });
  // Rest of the component code
}

Метод 3: использование React Navigation с компонентом высшего порядка NavigationFocus (HOC)

import { withNavigationFocus } from 'react-navigation';
class MyComponent extends React.Component {
  componentDidUpdate(prevProps) {
    if (this.props.isFocused !== prevProps.isFocused) {
      const currentScreen = this.props.navigation.getCurrentRoute().name;
      // Rest of the component code
    }
  }
  render() {
    // Render component
  }
}
export default withNavigationFocus(MyComponent);

Метод 4. Использование хука useRoute в React Navigation

import { useRoute } from '@react-navigation/native';
const MyComponent = () => {
  const route = useRoute();
  const currentScreen = route.name;
  // Rest of the component code
}

Метод 5: доступ к текущему экрану из навигационного контейнера

import { NavigationContainer } from '@react-navigation/native';
const MyComponent = () => {
  const navigationRef = useRef();
  const route = navigationRef.current?.getCurrentRoute();
  const currentScreen = route?.name;
  // Rest of the component code
  return (
    <NavigationContainer ref={navigationRef}>
      {/* App's navigation structure */}
    </NavigationContainer>
  );
}

В этой статье мы рассмотрели несколько методов получения текущего экрана в React Native Navigation. Независимо от того, предпочитаете ли вы использовать перехватчики, прослушиватели событий, компоненты более высокого порядка или прямой доступ к информации о маршруте, React Navigation предоставляет различные варианты для удовлетворения ваших потребностей. Включив эти методы в свои процессы навигации, вы можете улучшить функциональность и удобство использования ваших приложений React Native.