如何在反应导航中获取当前路线名称？

Question

我想在react-navigation中使用当前路线或屏幕的名称，如果条件需要进行一些更改，我想在其中使用它。

Answer 1

对于反应导航 v5：

import {useRoute} from '@react-navigation/native';

const route = useRoute();
console.log(route.name);

Answer 2

您可以将其捕获为以下代码：

this.props.navigation.state.routeName

Answer 3

如果您使用的是嵌套导航器，则可以使用此代码获取当前活动屏幕的状态

const getActiveRouteState = function (route: NavigationState): NavigationState {
    if (!route.routes || route.routes.length === 0 || route.index >= route.routes.length) {
        return route;
    }

    const childActiveRoute = route.routes[route.index] as NavigationState;
    return getActiveRouteState(childActiveRoute);
}

用法：

const activeRoute = getActiveRouteState(this.props.navigation.state);

当我需要从NavigationDrawer获取当前活动屏幕的状态时，可以使用此功能。

Answer 4

  import {getFocusedRouteNameFromRoute,useRoute} from '@react-navigation/native';

  //...
  const route = useRoute();
  const routeName = getFocusedRouteNameFromRoute(route); // Get Nested Route Name

Answer 5

这在 react-navigation v5.x 中工作正常

this.props.route.name

Answer 6

在使用"react-navigation": "^3.0.8"和DrawerNavigator时，可以使用this.props对象访问它 this.props.activeItemKey

Answer 7

准备

注册NavigationService.js，在没有导航道具的情况下查看导航中的文档详细信息

<App
  ref={navigatorRef => {
        NavigationService.setTopLevelNavigator(navigatorRef);
  }}
/>

递归函数

function getCurrentRoute(nav){
    if(Array.isArray(nav.routes)&&nav.routes.length>0){
        return getCurrentRoute(nav.routes[nav.index])
    }else {
        return nav.routeName
    }
}

获取当前路线名称

getCurrentRoute(NavigationService.getNavigator().state.nav)

Answer 8

可以从附加到导航容器的 navigationRef 获取此信息。哪里navigationRef有参考。

export const navigationRef = React.createRef()

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

然后使用： const currentRouteName = navigationRef.current.getCurrentRoute().name

或者在功能组件中您可以使用Refconst navigationRef = React.useRef()

Answer 9

对于react-navigation v5，您可以使用 useNavigationState 挂钩 -

import {useNavigationState} from '@react-navigation/native';

const state = useNavigationState(state => state);
const routeName = (state.routeNames[state.index]);
console.log(routeName);

Answer 10

const routeNameRef = React.createRef();

<NavigationContainer
  ref={navigationRef}
  onReady={() => routeNameRef.current = navigationRef.current.getCurrentRoute().name}
  onStateChange={() => {
    const previousRouteName = routeNameRef.current
    const currentRouteName = navigationRef.current.getCurrentRoute().name

    if (previousRouteName !== currentRouteName) {
      // Do something here with it
    }

    // Save the current route name for later comparision
    routeNameRef.current = currentRouteName
  }}
  >
  {/* ... */}
</NavigationContainer>
  );

export function getCurrentRouteName(action) {
  return routeNameRef;
}

您可以导入函数 getCurrentRouteName 并使用它来获取当前路由名称及其在 React Navigation 5 中的任何嵌套导航器中的工作。

Answer 11

对于 5.x 版本，目前最好的方法是getFocusedRouteNameFromRoute

import { getFocusedRouteNameFromRoute } from '@react-navigation/native';

export default function Stack(route) {
  // If the focused route is not found, we need to assume it's the initial screen
  // This can happen during if there hasn't been any navigation inside the screen
  // In our case, it's "Feed" as that's the first screen inside the navigator
  const routeName = getFocusedRouteNameFromRoute(route) ?? 'Feed';
  return <> ..... </>
}

Answer 12

在 React Navigation v5 中，我能够使用以下方法提取当前路线名称：

import { useNavigationState } from '@react-navigation/native'    

const routes = useNavigationState(state => state.routes)
const currentRoute = routes[routes.length -1].name
console.log('currentRoute: ',currentRoute)

Answer 13

import { useNavigation } from '@react-navigation/native';

const App = () => {
  const navigation = useNavigation();
  const { dangerouslyGetState } = useNavigation();
  const { index, routes } = dangerouslyGetState()
  console.log(routes[index].name);

  return(
    <>
    </>
  )
};