React-Navigation 是 React Native 中常用的导航库，它提供了丰富的导航组件和 API，能够帮助我们轻松地实现各种导航场景。本文将详细介绍 React-Navigation 的使用和应用，包括 Stack Navigator、Tab Navigator、Drawer Navigator 和 Navigation Actions 等内容。
安装 React-Navigation
首先，我们需要在项目中安装 React-Navigation：
--- ------- ------------------------
然后根据需要安装相应的导航组件，如 Stack Navigator：
--- ------- -----------------------
Stack Navigator
Stack Navigator 是 React-Navigation 中最常用的导航组件之一，它可以实现类似于原生应用的页面堆栈导航，并支持跨页面传递数据。
基本用法
在使用 Stack Navigator 之前，我们需要先创建一个 Stack Navigator 对象：
------ - -------------------- - ---- -------------------------- ----- ----- - -----------------------
然后就可以通过 Stack.Navigator 和 Stack.Screen 来定义导航栏和页面组件了：
-------- ----- -
------ -
---------------------
-----------------
------------- ----------- ---------------------- --
------------- -------------- ------------------------- --
------------------
----------------------
--
-其中，HomeScreen 和 DetailsScreen 分别是我们要导航的两个页面组件。
传递参数
Stack Navigator 支持在页面之间传递参数，我们可以通过 navigation.navigate 方法来传递参数：
-------- ------------ ---------- -- -
------ -
-------
--------- -- --------
----------- -- -
------------------------------ - ------- ---- ----------- ------ ---
--
--
--
-在接收页面中，我们可以通过 route.params 来获取参数：
-------- --------------- ------ ---------- -- -
----- - ------- ---------- - - -------------
------ -
------
---------------------
-------------------------
-------
--
-自定义导航栏
我们还可以自定义导航栏的样式和内容，例如修改标题和添加按钮：
-------- ------------ ---------- -- -
------ -
----------------
----------------
------------ -
---------------- ----------
--
---------------- -------
----------------- -
----------- -------
--
--
-
-------------
-----------
----------------------
----------
------ --- ------
------------ -- -- -
-------
----------- -- ----------- -- - ----------
------------
------------
--
--
--
--
------------------
--
-Tab Navigator
Tab Navigator 可以实现底部标签栏导航，常用于切换不同功能模块的页面。
基本用法
与 Stack Navigator 类似，我们需要先创建一个 Tab Navigator 对象：
------ - ------------------------ - ---- -------------------------------- ----- --- - ---------------------------
然后通过 Tab.Navigator 和 Tab.Screen 来定义标签和页面组件：
-------- ----- -
------ -
---------------------
---------------
----------- ----------- ---------------------- --
----------- --------------- -------------------------- --
----------------
----------------------
--
-自定义标签
我们可以自定义标签的样式和内容，例如修改图标和添加角标：
-----------
-----------
----------------------
----------
----------- -- ------ ---- -- -- -
----------------------- ----------- ------------- ----------- --
--
------------ --
--
--
--
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------