在 React Native 开发过程中，我们经常会需要修改 App 的顶部导航栏来显示额外的信息，比如显示未读消息数量或者用户的头像等。这时候可以使用 react-native-android-toolbar-badge 这个 npm 包来简化这个过程。
安装
首先，我们需要安装这个 npm 包。在命令行输入以下代码进行安装：
npm install react-native-android-toolbar-badge --save
导入组件
接下来，在需要使用这个组件的文件中导入 ToolbarBadge 组件：
import { ToolbarBadge } from 'react-native-android-toolbar-badge';使用示例
假设我们需要在一个名为 Home 的组件的导航栏上添加一个未读消息数量的标记。首先，我们需要使用 ToolbarBadge 包装我们的导航栏，并在里面添加一个右侧按钮：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------------
------ - -------- ------------ - ---- -------------------------------------
----- ---- ------- --------------- -
------------------ -
-------------
-
-------- -
------ -
----- -------- ----- - ---
--------
----------------- -- -----
------------
---------------
------------------- -- ---
-
-------------
---------
-------------
-------------------------
----------- -- ---
-
---------------------
---------------
----------
-------
--
-
-
------ ------- -----这样我们就在 Home 组件的导航栏上添加了一个红色的圆形标记，并且它会自动更新其包含的未读消息数量。我们也可以在 onPress 属性中定义一个回调函数来在用户点击这个按钮时触发一些其他的操作。
自定义样式
我们也可以自定义 ToolbarBadge 的样式来适应不同的主题和需求。以下是 ToolbarBadge 组件包含的默认样式：
-- -------------------- ---- -------
-
---------- -
----- --
--------- -----------
---- --
------ --
---------------- ------
------------- ---
---------------- --
------------------ --
--------- ---
----------- ---------
--------------- ---------
--
----- -
------ --------
--------- ---
--
-我们可以通过在 ToolbarBadge 组件中添加 style 属性并传入一个自定义的样式对象来覆盖这些默认样式。例如，以下是一个自定义样式的示例：
-- -------------------- ---- -------
-------------
---------
-------------
-------------------------
----------- -- ---
--------
---------- -
--------- ---
------------------ --
---------------- --
------------- ---
--
----- -
--------- ---
----------- -------
--
--
-
---------------------
---------------这个样式会将圆形标记变为椭圆形标记，并且加粗了文字。
结论
使用 react-native-android-toolbar-badge 这个 npm 包可以简化我们在 React Native 应用中添加导航栏标记的过程，并且提供了自定义样式的选项来适应不同的主题和需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d4181e8991b448db0e7