React Navigation 是一个用于 React Native 应用程序的导航库。它提供了许多不同的导航选项，例如带有侧滑菜单的屏幕容器、逐步转场动画和 Stack Navigator。
在本教程中，我们将研究如何使用 npm 包 react-navigation 来构建一个简单的 React Native 应用程序。
步骤 1：安装 react-navigation
要使用 react-navigation，我们需要使用 npm（或 yarn）进行安装。打开终端并输入以下命令：
npm install @react-navigation/native
步骤 2：安装依赖项
React Navigation 依赖于许多其他模块。我们需要安装这些依赖项，以确保该库能够正常工作。
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
步骤 3：创建导航容器
创建一个包含所有导航器的容器是构建 React Navigation 应用程序的第一步。为此，请在 App.js 文件中添加以下代码：
-- -------------------- ---- -------
------ -------------------------------
------ --------------------- ---- ---------------------------
----- --- - -- -- -
------ -
---------------------
--- ------ ---------- ---
----------------------
--
--
------ ------- ----步骤 4：创建屏幕组件
在 React Navigation 中，屏幕组件是导航器中的屏幕。每个屏幕都是一个 React 组件，其中包含应用程序要显示的内容。在我们的例子中，我们将创建两个屏幕组件 - HomeScreen 和 SettingsScreen：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ----- ----------- ---- ---------------
------ ---------------------- ---- --------------------------
----- ---------- - -- -- -
------ -
----- -------------------------
----- ------------------------ -- --- ---- --------------
-------
--
--
----- -------------- - -- -- -
------ -
----- -------------------------
----- ------------------------ -- --- -------- --------------
-------
--
--
----- ----- - -----------------------
----- --- - -- -- -
------ -
---------------------
-----------------
------------- ----------- ---------------------- --
------------- --------------- -------------------------- --
------------------
----------------------
--
--
----- ------ - -------------------
---------- -
----- --
----------- ---------
--------------- ---------
--
----- -
--------- ---
--
---
------ ------- ----步骤 5：创建导航选项
现在，我们需要为导航器创建选项卡。为此，请在 App.js 文件中添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ----- ----------- ---- ---------------
------ ---------------------- ---- --------------------------
----- ---------- - -- -- -
------ -
----- -------------------------
----- ------------------------ -- --- ---- --------------
-------
--
--
----- -------------- - -- -- -
------ -
----- -------------------------
----- ------------------------ -- --- -------- --------------
-------
--
--
----- ----- - -----------------------
----- --- - -- -- -
------ -
---------------------
-----------------
-------------
-----------
----------------------
---------------- -----------
--
------------- --------------- -------------------------- --
------------------
----------------------
--
--
----- ------ - -------------------
---------- -
----- --
----------- ---------
--------------- ---------
--
----- -
--------- ---
--
---
------ ------- ----步骤 6：处理导航事件
我们可以使用 Navigator Props 中的参数来控制导航器的行为。例如，我们可以在屏幕之间切换时播放动画或在导航期间处理一些任务。以下是一个处理导航事件的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ----- ----------- ------- ---- ---------------
------ ---------------------- ---- --------------------------
----- ---------- - -------------- -- -
------ -
----- -------------------------
----- ------------------------ -- --- ---- --------------
-------
--------- -- -------- -------
----------- -- --------------------------------
--
-------
--
--
----- -------------- - -------------- -- -
------ -
----- -------------------------
----- ------------------------ -- --- -------- --------------
------- --------- ----- ----------- -- -------------------- --
-------
--
--
----- ----- - -----------------------
----- --- - -- -- -
------ -
---------------------
-----------------
-------------
-----------
----------------------
---------------- -----------
--
------------- --------------- -------------------------- --
------------------
----------------------
--
--
----- ------ - -------------------
---------- -
----- --
----------- ---------
--------------- ---------
--
----- -
--------- ---
--
---
------ ------- ----结论
使用 React Navigation，我们可以方便地构建具有各种导航选项的 React Native 应用程序。此教程演示了如何安装和配置 react-navigation npm 包以及如何创建屏幕和导航选项。我们强烈建议读者进一步研究 React Navigation 的 API，并开始构建更复杂的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/the-react-navigation