简介
在前端开发中，我们经常使用 React Native 来进行移动端应用的开发。而在 React Native 中，使用导航器（Navigator）来进行界面间的跳转可谓是必不可少的。而 react-native-navigator-experimental-compat 就是一个帮助开发者使用导航器的 npm 包。
安装
在使用 react-native-navigator-experimental-compat 之前，需要先安装 React Native。安装完成后，通过 npm 安装 react-native-navigator-experimental-compat：
$ npm install react-native-navigator-experimental-compat --save
使用
引入
在使用 react-native-navigator-experimental-compat 之前，需要先引入：
import { NavigationExperimental } from 'react-native'
const {
CardStack: NavigationCardStack,
StateUtils: NavigationStateUtils,
} = NavigationExperimental初始化导航器
首先，需要定义一个初始化的导航器：
-- -------------------- ---- -------
----- ------------ ------- --------- -
------------------ -
------------
---------- - -
---------------- -
------ --
------- -
- ---- ------ --
--
--
-
-
------------------- -
----- - ----- - - -----------
------ ----------- -
---- -------
------ ----------- ---
---- ---------
------ ------------- ---
--------
------ -----
-
-
-------- -
------ -
--------------------
----------------- -------------------------- -
------------- ----------------- -
--
-
-
-我们通过定义一个状态来存储导航的结构。index 属性用来表示当前界面在路由数组中的下标，默认为 0，代表第一个界面。routes 属性则用来存储所有的路由，路由中每个元素都是一个对象，包含了 key 属性，表示路由的名称。
_renderScene 方法用来根据路由来选择需要渲染的组件（下面会讲到）。
最后，我们把初始化的导航器插入到整个应用中：
-- -------------------- ---- -------
----- --- ------- --------- -
-------- -
------ -
----- -------------------------
---------- ------------------------ --
------------- --
-------
--
-
-添加新的路由
我们可以在应用中加入更多的路由，以实现更多的界面跳转效果。比如，我们想要在「home」界面跳转到「detail」界面，则需要在 navigationState 的 routes 中添加一个新的元素：
onPress() {
const { navigationState } = this.props;
const newRoute = { key: 'detail' };
const newNavState = NavigationStateUtils.push(navigationState, newRoute);
this.setState({ navigationState: newNavState });
}我们创建了一个新的路由 newRoute，它的 key 属性为「detail」，即是我们想要跳转的界面。我们通过 NavigationStateUtils.push() 方法将新的路由添加到 routes 数组中，得到新的 navigationState 状态数据，并使用 setState() 方法来更新导航器的状态。
返回
使用 react-native-navigator-experimental-compat，我们可以通过返回按钮来实现对导航的管理。比如，在「detail」界面中，我们可以添加一个返回按钮，通过 pop() 方法来返回到上一个界面：
onPress() {
const { navigationState } = this.props;
const newNavState = NavigationStateUtils.pop(navigationState);
this.setState({ navigationState: newNavState });
}如果我们想要回到指定的某一个界面，可以使用 jumpToIndex() 方法：
onPress() {
const { navigationState } = this.props;
const newNavState = NavigationStateUtils.jumpToIndex(navigationState, 0);
this.setState({ navigationState: newNavState });
}高阶用法
上面的例子比较简单，使用起来较为容易。而针对一些较为复杂的界面跳转，我们也可以使用 react-native-navigator-experimental-compat 来进行处理。
在复杂的场景中，我们可以自定义一个导航器，然后可以对导航器进行较为自由的管理。比如，我们可以定义一个带有 TabBar 的导航器：
-- -------------------- ---- -------
----- ------------ ------- --------- -
------------------ -
------------
---------- - -
---------------- ------------------------------- ------------------------------
-
-
------------------- ------ -
----- - ----- - - -----------
------ ----------- -
---- -------
------ ----------- ---
---- ---------
------ ------------- ---
--------
------ -----
-
-
-------- -
------ -
--------------------
----------------- -------------------------- -
------------- ---------------------------- -
------- ---------------- -
--
-
-
-通过 _renderRoute() 方法可以自定义导航器的渲染。我们可以将所有的子导航器放到一个数组中，并通过 NavigationStateUtils.jumpToIndex() 方法来进行跳转。
总结
通过本文的介绍，我们可以看到 react-native-navigator-experimental-compat 在 React Native 中扮演着非常重要的角色，它可以有效地管理界面间的跳转，并且在复杂的场景中也能起到相当好的作用。希望本文可以对您学习和使用 react-native-navigator-experimental-compat 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e181e8991b448d7686