React Native获取路由名称

在React Native中，获取当前路由名称可以帮助我们实现许多功能，比如根据不同的路由名称，显示不同的导航栏或者展示不同的页面内容。那么在React Native中如何获取当前路由的名称呢？

使用react-navigation

react-navigation是一个流行的React Native导航库，可以轻松实现路由管理和导航。如果你已经使用了react-navigation来管理你的应用程序导航，那么你可以使用如下代码来获取当前路由名称：

import { useNavigationState } from '@react-navigation/native';
const CurrentRouteName = () => {
  const route = useNavigationState((state) => state.routes[state.index]);
  return route.name;
};

我们先引入了useNavigationState函数，并在组件中调用它。该函数会返回一个对象，该对象包含当前正在显示的路由名称和其他相关信息。我们可以使用属性route.name来获取当前路由的名称。

使用React Router Native

React Router Native是React Native的一部分，可以帮助我们创建流畅的、高效的、可扩展的导航。如果你已经使用React Router Native来管理你的应用程序导航，那么你可以使用如下代码来获取当前路由名称：

import { useLocation } from 'react-router-native';
const CurrentRouteName = () => {
  const location = useLocation();
  return location.pathname.substring(1);
};

首先，我们引入了useLocation钩子，并在组件中调用它。该钩子返回一个对象，该对象包含当前正在显示的路由的路径和其他相关信息。我们可以使用location.pathname获取路由路径，然后使用substring方法删除第一个斜杠，从而获取当前路由的名称。

结论

无论你选择哪种方式，获取当前路由名称是非常容易的。通过使用useNavigationState或useLocation函数，我们可以轻松地获取当前正在显示的路由名称并执行基于路由名称的操作。