Как я могу узнать свой текущий маршрут в реакции-навигации 5?

Question

Я использую это https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html для доступа к моей навигации из любого источника, мой файл выглядит следующим образом:

import { createRef } from 'react';

export const navigationRef = createRef();

export function navigate(name, params) {
  return navigationRef.current?.navigate(name, params);
}

export function goBack() {
  return navigationRef.current?.goBack();
}

export function getRootState() {
  return navigationRef.current?.getRootState();
}

Это идеально подходит для моего @navigation/drawer, который за пределами моего стека навигации.

Только одна проблема: последний метод не синхронизирован, и я хочу, чтобы в моем меню элементов было активное состояние, которое является текущим маршрутом.

Как это возможно при реагирующей навигации 5?

Answer 1

В NavigationContainer есть реквизит onStateChange, полезный для этого случая, проверьте документы реагирования и навигации Отслеживание экрана для аналитики и если вам нужен доступ без реквизита навигации, см. Навигация без реквизита навигации

Я делюсь кодом, чтобы получить только активное имя маршрута

function App(){
    const routeNameRef = React.useRef();
    // Gets the current screen from navigation state
    const getActiveRouteName = (state)=> {
        const route = state.routes[state?.index || 0];

        if (route.state) {
          // Dive into nested navigators
          return getActiveRouteName(route.state);
        }

        return route.name;
    };

    return (<NavigationContainer
    onStateChange={(state) => {
      if (!state) return;
      //@ts-ignore
      routeNameRef.current = getActiveRouteName(state);
    }}
    >
    ...
    </NavigationContainer>)
}