Question

我希望在反应导航中使用当前路线或屏幕的名称，如果条件需要进行一些更改，我想在其中使用它。

Answer 1

对于反应导航v5：

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

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

Answer 2

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

this.props.route.name

Answer 3

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

this.props.navigation.state.routeName

Answer 4

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

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 5

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

Answer 6

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 7

在React Navigation v5中，我可以通过以下方法提取当前路线名称：

flask_login

Answer 8

如果只想查看当前屏幕是否聚焦，则可以使用navigation.isFocused（）。 https://reactnavigation.org/docs/navigation-prop/#isfocused

示例：

float sum = 0, average=0;
float i;
float[] n = new float[5];
for (i = 0; i < 5; i++)
{
    Console.Write("State number " + (i + 1) + ":");
    // Fix here...
    n[(int)i] = float.Parse(Console.ReadLine());
}
for (i = 0; i < 5; i++)
{
    // Fix here...
    sum += n[(int)i];
    average = sum / 5;
}

Console.WriteLine("Sum av all numbers: " + sum);
Console.WriteLine("Average value of all numbers: " + average);
Console.ReadKey();

Answer 9

this.props.navigation.state.routeName 仅适用于react-navigation 4，但react-navigation 5不支持。

当前路径名称可以通过使用redux来实现：

-Navigator组件将路由对象作为道具传递给子组件

-子组件接收道具，并可以在 route.name

中找到路线名称

-要在屏幕更改中获取更新的路线名称，可以在导航上使用 focus 事件监听器

<======实施导航的父组件======>

import React from "react";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top- 
tabs";

import ChildScreen from "../screens/Home/childScreen";

const Tab = createMaterialTopTabNavigator();

const ParentNavigations = () => {

return (

<Tab.Navigator
>
  <Tab.Screen name="ChildScreen" component={ChildScreen} />
</Tab.Navigator>
);
};

export default ParentNavigations;

<=====子组件=====>

import React, { useEffect } from "react";
import { View, StyleSheet } from "react-native";
import { useDispatch } from "react-redux";
import ActionTypes from "../../store/actions/ActionsTypes";

const ChildScreen = ({ navigation, route }) => {
  const dispatch = useDispatch();
  useEffect(() => {
    const unsubscribe = navigation.addListener("focus", () => {
      dispatch({ type: ActionTypes.SETROUTE, payload: route.name }); // every time when screen gets focued it will update the route through redux
    });
    return unsubscribe;
  }, [navigation, route]);
  return (
    <View style={styles.container}>
      <Text>Hello</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#0C0B0B",
  },
});

export default ChildScreen;

Answer 10

我在TabNavigator中嵌套了多个BottomTabNavigator。我得到TabNavigator的当前路线：

    const pathAndParams = props.navigation.router.getPathAndParamsForState(props.navigation.state) || {}
    const activePath = pathAndParams.path

Answer 11

对于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 12

准备

注册NavigationService，请参见Navigating without the navigation prop

中的详细信息

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

获取当前routeName

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

Answer 13

这对我有用（我在导航抽屉内完成）！

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

const currentNavigation = getCurrentRoute(this.props.navigation.state);

Answer 14

对于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 15

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

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

  return(
    <>
    </>
  )
};

Answer 16

这对我有用，请尝试一下。

const getCurrentRouteName = () => {
    let _index = props.state.index;
    let _routeName = props.state.routeNames;
    return  _routeName[_index]
}

Answer 17

下面的“ wix / react-native-navigation”是我的工作解决方案，

import { Navigation } from 'react-native-navigation';

// Create a variable and set the value from navigation events
let navComponent = null
Navigation.events().registerComponentDidAppearListener(event => navComponent = event)

// navComponent will have the following structure
{"componentId": "Component9", "componentName": "HomeScreen", "componentType": "Component", "passProps": {}}

Answer 18

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

export const navigationRef = React.createRef()

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

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

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

Answer 19

const Home = ({ navigation, route }) => {
  // you will see screen key, name and params
  console.log("ROUTE", route); 
  // rest of your code
};

Answer 20

您也可以在钩子中使用它。

console.log(navigation.dangerouslyGetState());

Answer 21

对于本机导航 5.x 使用：

props.state.routeNames[props.state.index]

Answer 22

这是Justin.Mathew在他的回答中所描述的分步程序。

创建一个名为 RootNavigation.js 的新文件并将以下内容放入其中。

// RootNavigation.js

import * as React from 'react';

export const navigationRef = React.createRef(); // we will access all navigation props by importing this in any of the component

现在从 navigationRef 文件中导入 RootNavigation.js，并将 NavigationContainer 引用分配给它。在这一步之后，navigationRef 可以作为全局导航道具。

// App.js

import { NavigationContainer } from '@react-navigation/native';
import { navigationRef } from './RootNavigation';

export default function App() {
  
  handleNavigationRef = (ref) => {
    // DON'T DO navigationRef = ref, cause this will give you "navigationRef is 
    // read only" error.
    navigationRef.current = ref; 
  }
  return (
     <NavigationContainer ref={handleNavigationRef}>
        {/* ... */} 
     </NavigationContainer>
  );
}

用法

现在您可以在任何文件中导入 navigationRef，甚至是嵌套文件。并且可以使用它来获取当前路由和屏幕详细信息。

//SomeNestedComonent.js

import { navigationRef } from "path/to/RootNavigation.js/file";

const route = navigationRef.current?.getCurrentRoute(); //current route object
const currentScreen = route.name; // current screen name

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

22 个答案:

准备

获取当前routeName