前言
React Native 是一种基于 JavaScript 的移动应用程序开发框架，它使得开发人员可以使用相同的代码库来创建 iOS 和 Android 应用程序。React Native Navigation Experimental Compat 是一种 React Native 导航库，它专门用于创建具有易于使用、复杂路由和导航的应用程序。
在本教程中，我们将深入了解如何使用 React Native Navigation Experimental Compat 库，以及如何创建您的第一个应用程序。我们将学习在路由和导航方面的重要概念，并编写一些示例代码，以帮助您更好地理解。
步骤
安装 React Native Navigation Experimental Compat
在您的 React Native 项目中，打开终端并运行以下命令：
npm install react-native-navigation-experimental-compat --save
引入 React Native Navigation Experimental Compat
在您的 React Native 项目中，现在您需要引入 React Native Navigation Experimental Compat。在 App.js 文件中添加以下行：
import {
NavigationExperimental,
NavigationExperimentalCompat,
} from 'react-native-navigation-experimental-compat';创建 StackRouter
现在我们需要创建一个 StackRouter。StackRouter 是一个简单的路由器，用于管理应用程序中不同场景的导航。在 App.js 文件中添加以下行：
-- -------------------- ---- -------
----- -
--------------
-----------
- - -----------------------------
----- -
---------- --------------------
------- -----------------
- - -----------------------
----- ----------- - ----------------------------------------------------
---- -------
------------- - ---- ------ --
------------- ----- -- ----------------- ---------- ---
------------ ------- -- -
------ ----------------------- -
---- -------
------ -
----- -------- ----- - ---
---------- -----------
------------------- ----------- -- ---------------------
------- ---- ------- ---
-
-------- -- ----- -----------
---------------------
-------
--
---- --------
------ -
----- -------- ----- - ---
----------- -----------
------------------- ----------- --
----------------------------
-
-------- ---- -- ---- -----------
---------------------
-------
--
--------
------ -
----- -------- ----- - ---
---------- -----------
------------------- ----------- --
---------------------------- ---- ------- ---
-
-------- -- ----- -----------
---------------------
-------
--
-
--
---在以上代码中，我们创建了一个名为 SimpleStack 的 StackRouter。它负责将应用程序中不同场景的路由和导航关联起来，以及根据用户操作的不同，将应用程序的不同组件呈现在不同场景中。
渲染 StackRouter
我们已经创建了 StackRouter，现在我们需要将其渲染到应用程序中。在 App.js 文件中添加以下代码：
-- -------------------- ---- -------
------ ------- ----- --- ------- --------- -
-------- -
------ -
--------------
----------------------- -- -
--------------------
----------
-------------------------------
------------------- -- ----------------- ---------- ---
--
--
--------------------
--
--
-
-在以上代码中，我们将 SimpleStack 作为根路由器，使用 RootContainer 将其呈现在应用程序中。我们使用 NavigationCardStack 来演示 SimpleStack 的工作方式，同时呈现 NavigationHeader 以获取一些基本的导航控件。
现在，运行您的 React Native 项目，并点击应用程序中的按钮以切换场景。如果一切正常，您应该能够看到导航和场景的正确呈现。
结论
在本教程中，我们专门学习了如何使用 React Native Navigation Experimental Compat 库来创建具有易于使用、复杂路由和导航的应用程序。我们还回顾了 StackRouter 的概念，并提供了一些示例代码以帮助您了解如何在实际应用程序中使用它。
当然，这只是 React Native 的一个小部分。我们鼓励您探索更多的功能和技术，并不断学习这个强大的框架。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663881e8991b448e2315