前言
在前端开发中，导航功能是非常重要的，原生的导航方式又显得很不灵活，这时我们可以使用第三方的导航库来满足我们的需求。React-Navigation 是一个非常好的第三方导航库，它支持 Android，iOS 和 Web，而且完全由 JavaScript 编写，使用方便，功能强大。本文主要介绍 React-Navigation 的核心包之一 @react-navigation/core 的使用教程。
@react-navigation/core的安装和使用
安装核心包：
npm install @react-navigation/core --save
在代码中导入@react-navigation/core。下面是一个简单的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------------
------ - ------------------- - ---- -------------------------
-------- ----- -
------ -
---------------------
------
----------- ------------
-------
----------------------
--
-
------ ------- ----以上代码首先导入@react-navigation/core，然后在<NavigationContainer>中添加我们的组件。这里我们只添加了一个简单的<Text>组件，方便查看运行效果。
运行上面的代码，你就可以在你的APP中使用导航功能了。
路由的创建
1. StackNavigator
Stack Navigator 提供了一个堆栈导航模式，例如：页面从右侧滑入，从左侧滑出，而每个页面还可以是一个 Stack Navigator，这样就可以非常方便的层级导航。
Stack Navigator 的创建：
-- -------------------- ---- -------
------ - -------------------- - ---- -------------------------
------ ---------- ---- ---------------
------ ------------ ---- -----------------
----- -------------- - -----------------------
-------- ----- -
------ -
---------------------
------------------------- ------------------------
---------------------- ----------- ---------------------- --
---------------------- ------------- ------------------------ --
---------------------------
----------------------
--
-
------ ------- ----以上代码中，我们首先导入我们的StackNavigator，然后创建一个StackNavigator对象，并指定了我们的<HomeScreen>和<DetailScreen>组件，其中initialRouteName设置首页。我们还需分别创建HomeScreen和DetailScreen组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- ---- - ---- ---------------
-------- ------------ ---------- -- -
------ -
------
---------- -------------
-------
--------- -- ------ -------
----------- -- ------------------------------
--
-------
--
-
------ ------- ------------- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- ---- - ---- ---------------
-------- -------------- ---------- -- -
------ -
------
------------ -------------
------- --------- ----- ----------- -- -------------------- --
-------
--
-
------ ------- -------------以上代码中，我们创建了两个页面，再在页面中添加了一个按钮，当点击这个按钮时，页面可以相互跳转。
2. TabNavigator
Tab Navigator 提供了一种选项卡式的导航模式，通常用于为主要功能提供简单的、快速的多选项卡导航。
Tab Navigator 的创建：
-- -------------------- ---- -------
------ - ------------------------ - ---- -------------------------
------ ---------- ---- ---------------
------ ------------ ---- -----------------
----- ------------ - ---------------------------
-------- ----- -
------ -
---------------------
------------------------
-------------------- ----------- ---------------------- --
-------------------- ------------- ------------------------ --
-------------------------
----------------------
--
-
------ ------- ----以上代码中，我们首先导入TabNavigator，然后创建一个TabNavigator对象，并指定了我们的<HomeScreen>和<DetailScreen>组件。我们还需分别创建HomeScreen和DetailScreen组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------------
-------- ------------ -
------ -
------
---------- -------------
-------
--
-
------ ------- ------------- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------------
-------- -------------- -
------ -
------
------------ -------------
-------
--
-
------ ------- -------------以上代码中，我们创建了两个页面，再轻轻松松地将它们放入选项卡导航中。
结语
本文介绍了 React-Navigation 的核心包之一 @react-navigation/core 的使用教程，涵盖了 Stack Navigator 和 Tab Navigator 的创建方法。无论你是初学者还是有经验的前端开发人员，相信这篇文章都会给你带来收获。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedabcfb5cbfe1ea0610876