React Navigation 是 React Native 中常用的导航库，而 react-navigation-current-route（以下简称 RNC）则是其中一个实用的辅助工具。RNC 使得可以轻松获取当前页面的路由名称，可以帮助我们更方便地进行条件渲染以及一些其他的处理。
安装 RNC
使用 npm 进行安装：
--- ------- ------------------------------
或者使用 yarn 进行安装：
---- --- ------------------------------
使用 RNC
RNC 提供了一个高阶组件 withCurrentRoute，我们只需要通过在需要获取当前路由名的组件中将其包裹即可。
------ - ---------------- - ---- ---------------------------------
----- ----------- ------- --------------- -
-------- -
----- - ------------ - - -----------
------ -
---------------------------
--
-
-
------ ------- ------------------------------上述代码中，currentRoute 就是当前页面的路由名称。我们可以像使用普通 props 一样直接在组件中使用 currentRoute，从而获得当前路由名字。
静态类型
在使用 RNC 时，需要对组件的 props 进行类型定义。
------ - ----------------- --------------------- - ---- ---------------------------------
--------- ---------------- ------- --------------------- --
----- ----------- ------- --------------------------------- -
-------- -
----- - ------------ - - -----------
------ -
---------------------------
--
-
-
------ ------- ------------------------------在这个例子中，withCurrentRoute 提供了 WithCurrentRouteProps 接口类型。在 MyComponentProps 的定义中，使用了泛型，将 WithCurrentRouteProps 传递给了 MyComponentProps，从而可以在 MyComponent 的 props 中使用 currentRoute。
实际使用场景
RNC 的使用在实际的项目中有着丰富多样的应用场景。
权限控制
当有一些页面需要进行权限控制时，可以根据当前路由名称判断是否需要展示这些页面或进行相关操作。
------ - ---------------- - ---- ---------------------------------
----- ----------- ------- --------------- -
-------- -
----- - ------------ - - -----------
-- ------------- --- ------------ -
------ -
---------- --
--
-
------ -
--------- --
--
-
-
------ ------- ------------------------------上述代码中，如果当前页面的路由是 AdminPage，则渲染 AdminPage 组件；否则渲染 UserPage 组件。
基于当前路由名称的样式处理
我们可以根据当前页面的路由名称，为不同的页面设置不同的样式。
------ - ---------------- - ---- ---------------------------------
----- ----------- ------- --------------- -
-------- -
----- - ------------ - - -----------
----- ----- - ------------ --- ----------
- ---------------
- -----------------
------ -
----- --------------
------------- ------ ---------------------
-------
--
-
-
----- ------ - -------------------
--------- -
---------------- ------
--
---------- -
---------------- -------
--
---
------ ------- ------------------------------上述代码中，如果当前页面的路由是 HomePage，则使用 homePage 样式；否则使用 otherPage 样式。
结语
RNC 是一个实用的辅助工具，可以轻松获取当前页面的路由名称。在实际的项目中，我们可以使用 RNC 进行一些条件渲染、权限控制、样式处理等操作。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005626281e8991b448dfa8e