React-Navigation-Header-Buttons-Base是一款用于React Native和React Navigation的开发人员的NPM包。它提供了一个组件，可以轻松的向React Navigation的头部添加更多按钮。在这篇文章中，我们将学习如何使用这个npm包来轻松创建漂亮的头部按钮。
安装
我们首先要安装React Navigation和React-Navigation-Header-Buttons-Base这两个npm包
npm install react-navigation react-navigation-header-buttons-base
使用
React Navigation Header Buttons Base由2个主要部分组成：HeaderButton组件和HeaderButtons组件。在我们开始编写代码之前，我们需要在导入组件。
import {HeaderButton, HeaderButtons} from 'react-navigation-header-buttons-base';HeaderButton
在我们可以使用HeaderButtons组件之前，我们需要先定义一个HeaderButton组件。HeaderButton是一个可以自定义的按钮，它带有一些可选属性，例如onPress、title和icon。在这里，我们将定义一个名为CustomHeaderButton的组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- ---------------------------------------
------ ---- ---- ------------------------------------------
----- ------------------ - ----- -- -
------ -
-------------
----------
--------------------
-------------
--
--
--
------ ------- -------------------我们的CustomHeaderButton组件将接受props作为参数，并将其传递给导入的HeaderButton组件。IconComponent属性将导入我们使用的矢量图标包，并将其设置为要在按钮上显示的图像。在这个例子中，我们使用的是由react-native-vector-icons包提供的MaterialIcons矢量图标包。我们还可以设置iconSize属性来更改矢量图标的大小。
HeaderButtons
HeaderButtons组件允许我们轻松地将一组HeaderButton组件添加到React Navigation标题栏中。以下是一个简单的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------- ----- ---- ----------------------------------
------ ------------------ ---- -----------------------
----- --------------- - ----- -- -
------ -
-------------- -------------------------------------------
-----
--------------
-----------------
----------- -- -
-- -- ---------
--
--
-----
------------
---------------
----------- -- -
-- -- ---------
--
--
----------------
--
--
------ ------- ----------------在我们的MyHeaderButtons组件中，我们首先导入并定义了HeaderButtons和Item组件。我们还从我们之前的CustomHeaderButton组件中导入了我们的HeaderButtonComponent。我们可以在HeaderButtons组件内部添加多个Item组件，每个组件代表一个不同的按钮。title属性将显示在按钮旁边的文本，iconName属性将确定用于按钮的矢量图标。最后，我们在onPress属性中可以指定处理按钮点击时要执行的代码。
在React Navigation中使用HeaderButtons
我们已经定义了一个能用于头部按钮的HeaderButton和HeaderButtons组件。现在我们将展示如何在React Navigation中使用这些组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------------------- ---- --------------------------
------ ---------- ---- ---------------
------ --------------- ---- --------------------
----- ----- - -----------------------
----- --- - -- -- -
------ -
-----------------
-------------
-----------
----------------------
----------
------------ -- -- ---------------- ---
--
--
------------------
--
--
------ ------- ----在我们的App组件中，我们使用createStackNavigator导入了带有懒加载功能的堆栈导航。然后，我们在options属性中将我们的MyHeaderButtons组件附加到headerRight中。这会将我们的头部按钮放置在标题栏的右侧。
结论
React Navigation Header Buttons Base使创建头部按钮变得非常简单。使用HeaderButton和HeaderButtons组件，我们可以轻松地添加矢量图标、文本和处理事件到我们的React Navigation中的标题栏。我们希望本文对你有所帮助，让你可以使用React Navigation更完美的开发我们的应用。
示例代码
以下是我们在这篇文章中使用的完整示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- -------------- ----- ---- ----------------------------------
------ ---- ---- ------------------------------------------
----- ------------------ - ----- -- -
------ -
-------------
----------
--------------------
-------------
--
--
--
------ ------- -------------------
------ ----- ---- --------
------ --------------- ----- ---- ----------------------------------
------ ------------------ ---- -----------------------
----- --------------- - ----- -- -
------ -
-------------- -------------------------------------------
-----
--------------
-----------------
----------- -- -
-- -- ---------
--
--
-----
------------
---------------
----------- -- -
-- -- ---------
--
--
----------------
--
--
------ ------- ----------------
------ ----- ---- --------
------ ---------------------- ---- --------------------------
------ ---------- ---- ---------------
------ --------------- ---- --------------------
----- ----- - -----------------------
----- --- - -- -- -
------ -
-----------------
-------------
-----------
----------------------
----------
------------ -- -- ---------------- ---
--
--
------------------
--
--
------ ------- ----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e7d9381d61a3540b7d