定制化你的ReactNative底部导航栏-白红宇

前言

接触过ReactNative(以下简称RN)的大概都知道,react-navigation提供了两种开箱即用的导航栏组件

分别是这样的

尽管官方提供了导航栏的开箱即用方案,但是实际开发里面,我们会遇到各种各样的导航栏,各种各样的动效,所以以上可能无法满足我们的开发需求,我们就需要定制化的去做我们导航栏

例如我们UI给我的导航栏样式

我的内心: 这他么中间凸起的我怎么做,老子只是一个小前端,app很渣啊啊啊

借助可爱的google,我找到了解决方法

就是

TabBarComponent

这个api在文档资料很少,所以想要知道怎么用只能通过网络上的资源了

其中深受这篇文案的启发

这位外国友人(话说reactnative在国外似乎还有点火),借助动画库react-native-pose,完成了这样的效果

虽然是英文博客,但是配合翻译基本阅读无障碍,借助他的博客,我完成了ReactNative的自定义导航栏,效果如下

自定义底部导航栏

自定义底部导航栏是基于createBottomTabNavigator,所以我们使用这个api来创建底部导航栏

指定createBottomTabNavigator的tabBarComponent

tabBarComponent内部进行底部导航栏的编写

增加底部导航器

import React from 'react'import { createBottomTabNavigator } from 'react-navigation'import Icon from '../Common/Icon' // 自定义图标库import TabBar from '../Common/TabBar' // tabBarComponent 自定义组件// 页面import Category from '../View/TabBar/Category/Category'import Main from '../View/TabBar/Main/Main'import My from '../View/TabBar/My/My'import OrderList from '../View/TabBar/OrderList/OrderList'import OnlineDoctor from '../View/TabBar/OnlineDoctor/OnlineDoctor'export default createBottomTabNavigator(  {    // 首页:    one: {      screen: Main,      navigationOptions: () => {        return {          tabBarIcon: ({ tintColor }) => {            var soureImge            if (tintColor == '#CBCBCB') {              soureImge = 'main'            } else {              soureImge = 'mainActive'            }            return 
              }        }      }    },    //分类:     two: {      screen: Category,      navigationOptions: {        tabBarIcon: ({ tintColor }) => {          var soureImge          if (tintColor == '#CBCBCB') {            soureImge = 'Category'          } else {            soureImge = 'CategoryActive'          }          return 
            }      }    },    //问诊:    three: {      screen: OnlineDoctor,      navigationOptions: {        tabBarIcon: ({ tintColor }) => {          var soureImge          if (tintColor == '#CBCBCB') {            soureImge = 'onLine'          } else {            soureImge = 'onLineActive'          }          return 
            }      }    },    // 购物篮:     four: {      screen: OrderList,      navigationOptions: {        tabBarIcon: ({ tintColor }) => {          var soureImge          if (tintColor == '#CBCBCB') {            soureImge = 'OrderList'          } else {            soureImge = 'OrderListActive'          }          return 
            }      }    },    //我的:    five: {      screen: My,      navigationOptions: () => {        return {          tabBarIcon: ({ tintColor }) => {            var soureImge            if (tintColor == '#CBCBCB') {              soureImge = 'My'            } else {              soureImge = 'MyActive'            }            return 
              }        }      }    }  },  {    initialRouteName: 'one', // 初始化页面    tabBarComponent: TabBar,    tabBarOptions: {      activeTintColor: '#F34C56',      inactiveTintColor: '#CBCBCB'    }  })        复制代码

工具函数

图标没有使用图标库,直接搞一个图标库比较得心应手

../Common/Icon.js

import React from 'react'import { Image } from 'react-native'import { TabIcon } from './Image'const Icon = ({ name, style, size }) => {  const icon = TabIcon[name]  return (      )}export default Icon复制代码

而对于图片则进行统一管理

../Common/Image.js

/** * 所有的图片资源都从这里统一管理 */// 底部导航栏的图片资源export const TabIcon = {  main: require('..'),  mainActive: require('..'),  Category: require('..'),  CategoryActive: require('..'),  onLine: require('..'),  onLineActive: require('..'),  OrderList: require('..'),  OrderListActive: require('..'),  My: require('..'),  MyActive: require('..'),}复制代码

自定义底部导航器

万事俱备,下面就是自定义底部导航器了,就和定义React组件一样

import React from 'react'import {  View,  Text,  StyleSheet,  TouchableOpacity,  TouchableNativeFeedback,  Dimensions} from 'react-native'import posed from 'react-native-pose' // react-native 动画库const Scaler = posed.View({ // 定义点击缩放  active: { scale: 1 },  inactive: { scale: 0.9 }})const TabBar = props => {  const {    renderIcon,    getLabelText,    activeTintColor,    inactiveTintColor,    onTabPress,    onTabLongPress,    getAccessibilityLabel,    navigation  } = props  const { routes, index: activeRouteIndex } = navigation.state  return (    
    
           {routes.map((route, routeIndex) => {        const isRouteActive = routeIndex === activeRouteIndex        const tintColor = isRouteActive ? activeTintColor : inactiveTintColor        return (          
     
       {              onTabPress({ route })            }}            onLongPress={() => {              onTabLongPress({ route })            }}            accessibilityLabel={getAccessibilityLabel({ route })}          >            {route.key == 'three' ? ( // 对特殊图标进行特殊处理              
      
                       {renderIcon({ route, focused: isRouteActive, tintColor })}                
       
        {getLabelText({ route })}
                     
                  ) : ( // 普通图标普通处理              
      
                       {renderIcon({ route, focused: isRouteActive, tintColor })}                
       
        {getLabelText({ route })}
                     
                  )}          
             )      })}    
      )}const Styles = StyleSheet.create({  container: {    flexDirection: 'row',    height: 53,    borderWidth: 1,    borderRadius: 1,    borderColor: '#EEEEEE',    shadowOffset: { width: 5, height: 10 },    shadowOpacity: 0.75,    elevation: 1  },  tabButton: {    flex: 1,    justifyContent: 'center',    alignItems: 'center'  },  spotLight: {    width: tabWidth,    height: '100%',    justifyContent: 'center',    alignItems: 'center'  },  spotLightInner: {    width: 48,    height: 48,    backgroundColor: '#ee0000',    borderRadius: 24  },  scaler: {    flex: 1,    alignItems: 'center',    justifyContent: 'center',  },  scalerOnline: {    flex: 1,    alignItems: 'center',    justifyContent: 'flex-end',  },  iconText: {    fontSize: 12,    lineHeight: 20  }})export default TabBar复制代码

最后实现的效果就是

如果你也有这样的需求,可以看看老外发布的那篇博客

最后: 快要过年了,祝大家新年快乐