React Native 是 Facebook 推出的一款跨平台开发框架，可以轻松地利用 JavaScript 构建原生应用。而 Material Design 是 Google 设计团队推出的一种设计风格，它提供了一套谷歌官方的设计指南，旨在为应用提供一致的外观和感觉。
在 React Native 中，如果你想实现 Material Design 设计风格，你需要使用一些特殊的组件和样式。这篇文章将介绍如何使用 BottomNavigation 和 TabNavigator 来创建一个符合 Material Design 规范的底部导航栏，以及如何为其添加路由和图标。
1. 安装依赖
首先我们需要安装两个依赖，分别是 react-native-material-bottom-navigation 和 react-native-material-bottom-navigation-icons。
npm install --save react-native-material-bottom-navigation npm install --save react-native-vector-icons
其中，react-native-vector-icons 是一个广泛使用的依赖，提供了各种图标集的可扩展性和易用性。
2. 导入并使用组件
我们首先需要导入 BottomNavigation 和 TabNavigator 组件，注意，这两个组件位于不同的库中：
import { TabNavigator } from 'react-navigation'
import { BottomNavigation } from 'react-native-material-bottom-navigation'
import Icon from 'react-native-vector-icons/MaterialIcons'
import MaterialIcon from 'react-native-material-design-icons'TabNavigator 将会有 tab 路由和 tab 数据，而 BottomNavigation 将会有一组 tabs，每个 tab 对应一个路由。接下来，我们可以在页面中使用 BottomNavigation 组件了：
-- -------------------- ---- -------
-----------------
-------
-
---- -------
----- -------
------ -------
--------- ----------
----------- ---------- ---- ---- ------
--
-
---- ----------
------ ----------
----- -----------------
--------- ----------
----------- ---------- ---- ---- ------
--
-
---- -----------
------ -----------
----- -----------
--------- ----------
----------- ---------- ---- ---- ------
-
--
---------------------
-----------------------
--在 tabs 数组中，每个 tab 包含以下属性：
- key：路由名称
- icon：图标名称
- label：标签名称
- barColor：底部导航栏颜色
- pressColor：点击时的颜色
renderTab 被用来渲染 tab 的每个标签。在这里，我们可以自定义渲染一个包含图标的标签：
const renderTab = ({ tab, isActive }) => (
<View style={styles.tab}>
<Icon name={tab.icon} size={24} color="white" />
<Text style={{ color: 'white' }}>
{tab.label}
</Text>
</View>
)onTabPress 用于在点击底部导航栏时更新路由和状态：
const onTabPress = (tab, index) => {
const { navigation } = this.props
navigation.navigate(tab.key)
}3. 添加路由与图标
为了使路由和图标与底部导航栏配合得更好，我们需要在 TabNavigator 中添加路由和图标。接下来是一个示例代码，其中包含三个路由：
-- -------------------- ---- -------
----- -------------- - -------------
-
----- - ------- ---------- --
-------- - ------- ------------- --
--------- - ------- -------------- -
--
-
---------------- -----------------
--------------- ---------
------------- ------
----------------- ------
--------- ----
-
-
-------------------------------- - -- ---------- -- -- -
----- - --------- - - -----------------------------------------------
----- ----------- - ---------
------ - ----------- -
-
----- -------- - -- --------- -- -- -
------------- ------------------- --------- ----------------- --
-
----- ----------- - -- --------- -- -- -
------------- ----------- --------- ----------------- --
-
----- ------------ - -- --------- -- -- -
------------- --------------- --------- ----------------- --
-
----- ------ - -------------------
---- -
-------------- ---------
----------- ---------
--------------- ---------
---------------- -
-
--
----- ---------- - -- -- -
----- -------- ----- -- ----------- --------- --------------- -------- ---
-----------------
-------
-
---------------------------- - -
------------ -------
----------- --------
-
----- ------------- - -- -- -
----- -------- ----- -- ----------- --------- --------------- -------- ---
--------------------
-------
-
------------------------------- - -
------------ ----------
----------- -----------
-
----- -------------- - -- -- -
----- -------- ----- -- ----------- --------- --------------- -------- ---
---------------------
-------
-
-------------------------------- - -
------------ -----------
----------- ------------
-在这个示例代码中，我们使用了 Material Icon 组件来渲染图标。同时，每个路由都定义了一个 tabBarLabel 和 tabBarIcon，从而将路由和图标添加到底部导航栏中。
总结
通过使用 React Native 和 Material Design 规范，我们可以轻松创建各种感觉一致，外表优美的原生应用。在这篇文章中，我们介绍了如何使用 BottomNavigation 和 TabNavigator 组件来实现符合 Material Design 规范的底部导航栏，并添加了路由和图标。希望这篇文章可以为你的开发工作提供指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652c9fcb7d4982a6ebe4547b