介绍
react-native-material-bottom-navigation-kream 是一个 React Native 下的 Material Design 风格底部导航栏组件。使用该组件可以为您的项目添加美观且易于使用的底部导航功能。在该组件中，每个标签页都和一个 React Native 视图组件相匹配，所以您可以自由设计导航栏和相关页面的布局和样式。
需求
在开始使用 react-native-material-bottom-navigation-kream 之前，您需要先安装以下软件：
- Node.js：V10 或更高版本
- React Native：V0.60 或更高版本
- 安装 Android 或 iOS 开发环境
安装
在您的 React Native 项目根目录下，运行以下命令：
npm install react-native-material-bottom-navigation-kream
用法
该组件使用 BottomNavigation 和 BottomNavigationTab 两个组件来实现底部导航。在使用前，您需要先导入相应的组件：
import { BottomNavigation, BottomNavigationTab } from "react-native-material-bottom-navigation-kream";在您的 render 函数中，您可以使用以下代码来添加底部导航栏以及标签页面：
-- -------------------- ---- -------
-------- -
------ -
-----------------
----------------------------------------
--------------- -- --------------- -------------- ----- ---
-
--------------------
---------- --
----------- ----------- ---
-
------
---------- --------
-------
----------------------
--------------------
---------- --
----------- --------------- ---
-
------
---------- --------
-------
----------------------
-------------------
--
-在上述代码中，使用 BottomNavigation 组件来创建底部导航栏，使用 BottomNavigationTab 组件来创建页面标签。使用 selectedIndex 和 onSelect 属性可以设置和获取目前选中标签页的位置。您可以根据需要添加更多的 BottomNavigationTab 组件。
指南
下面简要介绍一下 BottomNavigation 和 BottomNavigationTab 的常用属性：
BottomNavigation 属性
selectedIndex: 表示当前选中的标签页的索引位置（从 0 开始）。当该属性变化时，会自动切换到相应的标签页。onSelect: 一个回调函数，该函数以一个参数index作为参数，表示点击的标签页的索引位置。如果您需要在导航栏切换的时候处理一些逻辑，可以使用该属性。
BottomNavigationTab 属性
title: 显示在标签页下方的标签名称。icon: 显示在标签页上方的图标组件。badgeText: 在标签页上方显示的消息计数器。iconStyle: 设置图标组件的样式。其中tintColor属性可以用于设置图标的颜色。
示例
您可以使用以下示例代码来快速了解 react-native-material-bottom-navigation-kream 的用法：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ---- - ---- ---------------
------ - ----------------- ------------------- - ---- ------------------------------------------------
------ ---- ---- ------------------------------------------
----- --- ------- --------- -
----- - -
-------------- -
--
-------- -
------ -
----- -------- ----- - ---
----- -------- ----- - ---
-------------------
-------
-------------------------------
-------
--
-
------------------------ -
------ -
-----------------
----------------------------------------
--------------- -- --------------- -------------- ----- ---
-
--------------------
------------
----------- ----------- ---
--
--------------------
----------------
----------- --------------- ---
--
-------------------
--
-
------------ -
------ -------------------------- -
---- --
------ -
----- -------- -------- -- ---
---------- -----------
-------
--
---- --
------ -
----- -------- -------- -- ---
-------------- -----------
-------
--
--------
-- -- -------
-
-
-
------ ------- ----执行上述代码，您将会看到一张类似于以下的效果图：
结语
react-native-material-bottom-navigation-kream 是一个实现 Material Design 风格底部导航栏的 React Native 组件。在该组件中，您可以方便地定义导航栏和标签页的布局和样式。希望该教程对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560ac81e8991b448deeb2