我如何知道我在 react-navigation 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

我正在使用以下方法来获取 react-navigation v5 中的当前路线名称。 https://reactnavigation.org/docs/navigation-prop/#dangerouslygetstate

const {index, routes} = this.props.navigation.dangerouslyGetState();
const currentRoute = routes[index].name;
console.log('current screen', currentRoute);

Answer 2

NavigationContainer 有 onStateChange 属性，对于这种情况很有用，请检查反应导航文档屏幕跟踪以进行分析 ，如果您需要在没有导航属性的情况下进行访问，请参阅不使用导航属性进行导航

我分享代码以仅获取活动的routeName

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>)
}