定制化你的ReactNative底部导航栏

前言

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

createBottomTabNavigator
createMaterialBottomTabNavigator

分别是这样的

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

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

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

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

就是

TabBarComponent

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

其中深受这篇文案的启发

Let's Create A Custom Animated Tab Bar With React Native

这位外国友人(话说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 soureImgeif (tintColor == '#CBCBCB') {soureImge = 'main'} else {soureImge = 'mainActive'}return <Icon name={soureImge} size={26} color={tintColor} />}}}},//分类:two: {screen: Category,navigationOptions: {tabBarIcon: ({ tintColor }) => {var soureImgeif (tintColor == '#CBCBCB') {soureImge = 'Category'} else {soureImge = 'CategoryActive'}return <Icon name={soureImge} size={26} color={tintColor} />}}},//问诊:three: {screen: OnlineDoctor,navigationOptions: {tabBarIcon: ({ tintColor }) => {var soureImgeif (tintColor == '#CBCBCB') {soureImge = 'onLine'} else {soureImge = 'onLineActive'}return <Icon name={soureImge} size={48} color={tintColor} />}}},// 购物篮: four: {screen: OrderList,navigationOptions: {tabBarIcon: ({ tintColor }) => {var soureImgeif (tintColor == '#CBCBCB') {soureImge = 'OrderList'} else {soureImge = 'OrderListActive'}return <Icon name={soureImge} size={26} color={tintColor} />}}},//我的:five: {screen: My,navigationOptions: () => {return {tabBarIcon: ({ tintColor }) => {var soureImgeif (tintColor == '#CBCBCB') {soureImge = 'My'} else {soureImge = 'MyActive'}return <Icon name={soureImge} size={26} color={tintColor} />}}}}},{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 (<Imagesource={icon}style={[{ width: size, height: size }, style]}/>)
}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} = propsconst { routes, index: activeRouteIndex } = navigation.statereturn (<Scaler style={Styles.container}>{routes.map((route, routeIndex) => {const isRouteActive = routeIndex === activeRouteIndexconst tintColor = isRouteActive ? activeTintColor : inactiveTintColorreturn (<TouchableNativeFeedbackkey={routeIndex}style={Styles.tabButton}onPress={() => {onTabPress({ route })}}onLongPress={() => {onTabLongPress({ route })}}accessibilityLabel={getAccessibilityLabel({ route })}>{route.key == 'three' ? ( // 对特殊图标进行特殊处理<Scalerstyle={Styles.scalerOnline}pose={isRouteActive ? 'active' : 'inactive'}>{renderIcon({ route, focused: isRouteActive, tintColor })}<Text style={Styles.iconText}>{getLabelText({ route })}</Text></Scaler>) : ( // 普通图标普通处理<Scalerstyle={Styles.scaler}pose={isRouteActive ? 'active' : 'inactive'}>{renderIcon({ route, focused: isRouteActive, tintColor })}<Text style={Styles.iconText}>{getLabelText({ route })}</Text></Scaler>)}</TouchableNativeFeedback>)})}</Scaler>)
}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
复制代码

最后实现的效果就是

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

Let's Create A Custom Animated Tab Bar With React Native

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