React Native 是一种跨平台开发框架，可以让开发者使用 JavaScript 进行 Android 和 iOS 应用程序的开发，无需区分操作系统。在开发中，我们经常需要在应用中添加导航栏以提供更好的用户体验，但是使用 React Native 实现导航栏并不是一件易事。在本文中，我们将探讨在 React Native 中如何实现 Android 和 iOS 原生导航栏。
实现方法
在 React Native 中，有两种方法可用于实现 Android 和 iOS 原生导航栏：
- 使用 React Navigation
- 使用原生导航库
1. 使用 React Navigation
React Navigation 是一种基于 JavaScript 的库，可用于在 React Native 应用程序中实现导航。它提供了很多常见的导航组件，例如 标签页、抽屉式导航和堆栈导航。React Navigation 基于 JavaScript 编写，因此它不需要使用原生平台代码就可以提供导航功能。
安装 React Navigation
可以使用以下命令在项目中安装 React Navigation：
$ npm install @react-navigation/native $ npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
创建堆栈导航
React Navigation 中最常见的导航类型是堆栈导航，我们可以使用 createStackNavigatior 方法来创建堆栈导航，例如：
-- -------------------- ---- -------
------ - -------------------- - ---- --------------------------
----- ----- - -----------------------
-------- ----- -
------ -
---------------------
-----------------
------------- ----------- ---------------------- --
------------- -------------- ------------------------- --
------------------
----------------------
--
-在上面的例子中，我们先通过 createStackNavigator 方法创建一个名为 Stack 的堆栈导航。然后我们可以使用 NavigationContainer 组件包装整个堆栈导航，将其与 React Navigation 绑定。最后，我们通过 Stack.Navigator 组件和 Stack.Screen 组件将两个不同的屏幕（Home 和 Details）添加到堆栈导航中。
自定义导航栏
在 React Navigation 中，我们可以使用 navigationOptions 属性自定义每个屏幕的导航栏。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------------
----- ---------- ------- --------------- -
------ ----------------- - -
------ -------
--
-------- -
------ -
----- -------- ----- -- ----------- --------- --------------- -------- ---
---------- -------------
-------
--
-
-在上面的例子中，我们在 HomeScreen 组件中添加了一个 static navigationOptions 属性，并将其设置为带有“Home”标题的对象。这个对象可以具有很多其他选项，例如 headerTintColor（导航栏颜色）和 headerStyle（导航栏样式）。
2. 使用原生导航库
除了 React Navigation 之外，我们也可以使用原生导航库来实现 Android 和 iOS 的原生导航栏。这种方法需要使用 Android 和 iOS 平台的原生代码编写导航栏，并使用 React Native 桥接原生代码。
Android
在 Android 上实现原生导航栏需要使用 Android 平台的 Toolbar 组件。我们可以在 React Native 中使用 react-native-material-ui 库来添加 Toolbar 组件。
首先，我们需要使用以下命令将 react-native-material-ui 库添加到我们的项目中：
$ npm install react-native-material-ui
然后，在需要添加导航栏的组件中，我们可以使用以下代码来创建 Toolbar：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- ----- ---- - ---- ---------------
------ - ------- - ---- ---------------------------
----- ---------- ------- --------------- -
-------- -
------ -
----- -------------------------
--------
------------------------
--------------------
---------------------- -- -------------------------------
--
----- -----------------------
------------ -------------
-------
-------
--
-
-
----- ------ - -------------------
---------- -
----- --
--
-------- -
----- --
----------- ---------
--------------- ---------
--
---在上面的例子中，我们首先在导入 react-native-material-ui 库后，在组件的 render 函数中创建了一个 Toolbar，并将其放置在组件的顶部。我们还添加了一个内容容器（content）来存放组件的主体内容。
iOS
在 iOS 上实现原生导航栏需要使用 iOS 平台的 UINavigationController 组件。
首先，在 AppDelegate.m 文件中导入 UIKit 库，并定义一个 UINavigationController。
-- -------------------- ---- ------- ------- --------------- ------- ------------------- ------- ------------------------------ ------- --------------------- ---------- ----------- - ----------- ----------------------- --------- ----------- ------- -------- -------- --------- ----------- ------- ---------------------- ---------------------- ----
然后，我们在 didFinishLaunchingWithOptions 方法中创建 UINavigationController：
-- -------------------- ---- -------
- -------------------------------- ------------- ------------------------------------------- ---------------
-
--------- ------- - ----------- ------ --------------------- -----------------------------
----------- --------- - ------------- ------ ---------------------
-------------------
-----------------------
------------------------- - ------------------------ ------ -------------------------------------
----------- - ---------- ------ ----------------------- --------------------
------------ -------------------------------------------------
------------ -------------------
------ ----
-在上面的例子中，我们首先创建了一个 RCTBridge 实例，并使用它来创建一个 RCTRootView。然后，我们使用 UINavigationController 的 initWithRootViewController 方法创建了一个新的 UINavigationController。最后，我们使用新的 UINavigationController 运行应用程序，将其存储在 AppDelegate 的属性中。
自定义导航栏
要自定义 iOS 导航栏，我们可以使用 iOS 平台的原生代码。
首先，在需要自定义导航栏的组件中，我们可以使用以下代码定义导航栏的标题和按钮：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- ----- ---- - ---- ---------------
----- ---------- ------- --------------- -
------------------- -
----------------------------------
------ -------
------------ -
---------------- ----------
--
---------------- -------
------------ -- -- -
-------
----------- -- ----------- -- - ----------
------------
------------
--
--
---
-
-------- -
------ -
----- -------------------------
----- -----------------------
------------ -------------
-------
-------
--
-
-
----- ------ - -------------------
---------- -
----- --
--
-------- -
----- --
----------- ---------
--------------- ---------
--
---在上面的例子中，我们在 HomeScreen 组件中添加了一个 componentDidMount 函数，并在其中使用 this.props.navigation.setOptions 方法设置导航栏的相关属性。例如，我们将 title 设置为“Home”，将 headerStyle 设置为红色，并使用 headerTintColor 将文本颜色设置为白色。我们还添加了一个信息按钮到导航栏的右侧。
示例代码
以下是完整的创建带有自定义导航栏的堆栈导航的代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- ----- ----- ------ - ---- ---------------
------ - -------------------- - ---- --------------------------
------ - ------------------- - ---- ---------------------------
----- ----- - -----------------------
----- ---------- ------- --------------- -
------------------- -
----------------------------------
------ -------
------------ -
---------------- ----------
--
---------------- -------
------------ -- -- -
-------
----------- -- ----------- -- - ----------
------------
------------
--
--
---
-
-------- -
------ -
----- -------------------------
----- -----------------------
------------ -------------
-------
--------- -- --------
----------- -- ------------------------------------------
--
-------
-------
--
-
-
----- ------------- ------- --------------- -
------------------- -
----------------------------------
------ ----------
------------ -
---------------- ----------
--
---------------- -------
------------ -- -- -
-------
----------- -- ----------- -- - ----------
------------
------------
--
--
---
-
-------- -
------ -
----- -------------------------
----- -----------------------
------------- -------------
-------
--------- -- -----
----------- -- -------------------------------
--
-------
-------
--
-
-
------ ------- -------- ----- -
------ -
---------------------
---------------- ------------------------
------------- ----------- ---------------------- --
------------- -------------- ------------------------- --
------------------
----------------------
--
-
----- ------ - -------------------
---------- -
----- --
--
-------- -
----- --
----------- ---------
--------------- ---------
--
---在上面的例子中，我们首先导入了所需的 React Native 和 React Navigation 组件。然后，我们定义了两个具有自定义导航栏的屏幕（HomeScreen 和 DetailsScreen），并使用 createStackNavigator 方法在堆栈导航中添加它们。
总结
在本文中，我们讨论了实现在 React Native 应用中创建原生导航栏的两种方法。我们介绍了如何使用 React Navigation 和原生导航库来创建自定义导航栏，并提供了示例代码来演示每种方法。希望本文对你了解如何在 React Native 应用中实现原生导航栏有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ede1e48841e9894d458fc