在 React Native 应用中，NavigationBar 通常是 APP 页面的重要组件之一。它可以帮助我们展示和导航页面的标题、按钮等内容。但是，React Native 框架自身并没有提供好用的 NavigationBar 组件，那么怎样可以更好地使用NavigationBar 组件呢？本篇文章将为大家介绍一个npm 包 react-native-navbar-style，并且将会教大家如何使用这个 npm 包来改进NavigationBar的使用效果。
react-native-navbar-style 简介
react-native-navbar-style 是一个 React Native 应用的 NavigationBar 组件。 它包含了许多美丽且有实用性的预定义样式，同时还支持用户自定义样式。它解决了开发者遇到的许多问题，并简化了 NavigationBar 组件的使用过程。
react-native-navbar-style 安装
使用 npm 安装 react-native-navbar-style 必须要遵从nmp 包安装的规定，这里假设读者已经了解了从 npm 安装 npm 包的基本操作。
先通过 npm 安装 react-native-navbar-style:
npm install react-native-navbar-style --save
然后，在您的 React Native 项目中导入 react-native-navbar-style：
import { Toolbar } from 'react-native-navbar-style'react-native-navbar-style 用法
简单使用
可以通过以下代码来创建一个页面类型的应用：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ---- - ---- ---------------
------ - ------- - ---- ----------------------------
------ ------- ----- --- ------- --------- -
-------- -
------ -
----- -----
-------- --
----- ---- -------
--------------------
-------
-------
--
-
-如果要修改标题或者添加返回按钮或自定义的按钮，可以通过 props 属性来实现：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ---- - ---- ---------------
------ - ------- - ---- ----------------------------
------ ------- ----- --- ------- --------- -
-------- -
----- ----------- - -
------ ------
-------- -- -- ------------
--
------ -
----- -----
--------
------------------- ------
--------------
------------------------- --
----- ---- -------
--------------------
-------
-------
--
-
-样式自定义
如果您的项目需要一些不同的导航栏样式， react-native-navbar-style提供了添加自定义样式的方法，可以让您的导航栏更加自然流畅，并且融合更好的与整体项目的UI。以下示例展示如何使用自定义样式：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ---- - ---- ---------------
------ - ------- - ---- ----------------------------
------ ------- ----- --- ------- --------- -
-------- -
------ -
----- -----
--------
------------------------
------------- ----------- ------- ---------- -------- --
------------- ----- ---------------------------- --
-------------- ----- ------------------------------ --
------------------------------- -----------
--
----- ---- -------
----- ----------------- -------------------
-------
-------
--
-
----
-- --
----------------------------------------------- ---------------------------------------------------- --- --------------------------------------
- ------------------------------------------------------------------------------ --------
------------------------------------------------------------------------------------------------------------------------