我如何知道我在 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 道具，在这种情况下很有用，检查 react-navigation docs Screen Tracking 以进行分析，如果您需要在没有导航道具的情况下访问，请参阅没有导航道具的导航

我共享代码以仅获取活动的 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>)
}

Answer 3

如果您想从组件中了解当前屏幕，您还可以使用以下命令：

export const HomeScreen = ({ navigation, route }) => {

    console.log(route.name);

    return (
        {...}
    );
};

Answer 4

可以从附加到导航容器的 navigationRef 中获取它。 其中 navigationRef 是参考。

export const navigationRef = React.createRef()

和

<NavigationContainer
   ref={navigationRef} 
   >
  <Navigator />
</NavigationContainer>

然后使用： const currentRouteName = navigationRef.current.getCurrentRoute().name获取当前路线名称。

或者，在功能组件中，您可以 useRef const navigationRef = React.useRef()

Answer 5

文档推荐了一个名为getFocusedRouteNameFromRoute(route)实用函数。 但是 - 它似乎只适用于子屏幕，所以我定义了以下函数来获取活动路由名称：

const getCurrentRouteName = (navigation, route) => {
    if (route.state)
        return getFocusedRouteNameFromRoute(route);
    return route.name;
};

Answer 6

这对我有用。 在 navigationRef.js 中

let navigator;

export const setNavigator = (nav) => {
  navigator = nav;
};

export const getCurrentRoute = () => {
  const route = navigator.getCurrentRoute();
  return route.name;
};

这可以从任何这样的来源引用

import { getCurrentRoute } from '../navigationRef';

const currentScene = getCurrentRoute();