前言
您可能已经接触过ReactNative (以下简称RN )，react-navigation提供了两种开箱即用的导航栏组件
每个createbottomtabnavigatorcreatematerialbottomtabnavigator都是这样的
官方提供了导航栏的开箱方案，但在实际开发中，会遇到各种导航栏，产生各种各样的效果。 因此，这些可能不能满足我们的开发需要。 我们需要定制导航栏
比如我们的UI给我的导航栏样式
我的心在：这个他心中高涨的我该怎么办？ rxdsb只是一个小前端，APP是废物啊
多亏可爱的谷歌，我找到了解决方案
是啊
TabBarComponent
因为这个api的文档资料很少，所以只有互联网上的资源想知道如何使用
其中受到了这份文案的很大启发
let ' screateacustomanimatedtabbarwithreactnative
借助这位外国朋友(顺便说一下，reactnative在国外似乎还火着呢)、动漫画廊的react-native-pose，达到了这样的效果
虽然是英语博客，但是配合翻译基本上阅读是没有障碍的。 借助他的博客，完成了ReactNative的自定义导航栏。 效果如下
底部导航栏的自定义底部导航栏基于createBottomTabNavigator，您可以使用此api创建底部导航栏。 通过指定createBottomTabNavigator的tabBarComponenttabBarComponent内部来创建底部导航栏，然后执行底部导航importreactfrom ' react ' import { crreate 添加了ator } from ' react-navigation ' importiconfrom ' ./common/icon ' /自定义图形库importtabbarfrom ' ./common tor页面importcategoryfrom ' ./view/tabbar/category/category ' importmainfrom ' ./view/tabbar/main/main ' main ' importmyfroom my ' importorderlistfrom ' ./view/tabbar/order list ' importonlinedoctorfrom ' ./view/tabbar/onlinedocttar在线医生' exportdefaultcreatebottomtabnavigator () /首页： one: { screen: Main， navigationoptions3360(={return ) tabbar icon 3360 (tint color ) ) varsoureimgeif (tint color==' # CBC BCB ' ) )。 else { soure imge=' main active ' } return iconname={ soure imge } size={ 26 } color={ tint color }/}， /分类： tte } navigation options 3360 { tabbar icon : } { tint color }={ varsoureimgeif (tint color==' # CBC BCB ' } { sosoure } ' category active ' } return iconname={ soure imge } size={ 26 } color={ tint color }/}，//问诊3333
or, navigationOptions: { tabBarIcon: ({ tintColor }) => { var soureImge if (tintColor == '#CBCBCB') { soureImge = 'onLine' } else { soureImge = 'onLineActive' } return <Icon name={soureImge} size={48} color={tintColor} /> } } }, // 购物篮: four: { screen: OrderList, navigationOptions: { tabBarIcon: ({ tintColor }) => { var soureImge if (tintColor == '#CBCBCB') { soureImge = 'OrderList' } else { soureImge = 'OrderListActive' } return <Icon name={soureImge} size={26} color={tintColor} /> } } }, //我的: five: { screen: My, navigationOptions: () => { return { tabBarIcon: ({ tintColor }) => { var soureImge if (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 ( <Image source={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 } = props const { routes, index: activeRouteIndex } = navigation.state return ( <Scaler style={Styles.container}> {routes.map((route, routeIndex) => { const isRouteActive = routeIndex === activeRouteIndex const tintColor = isRouteActive ? activeTintColor : inactiveTintColor return ( <TouchableNativeFeedback key={routeIndex} style={Styles.tabButton} onPress={() => { onTabPress({ route }) }} onLongPress={() => { onTabLongPress({ route }) }} accessibilityLabel={getAccessibilityLabel({ route })} > {route.key == 'three' ? ( // 对特殊图标进行特殊处理 <Scaler style={Styles.scalerOnline} pose={isRouteActive ? 'active' : 'inactive'} > {renderIcon({ route, focused: isRouteActive, tintColor })} <Text style={Styles.iconText}>{getLabelText({ route })}</Text> </Scaler> ) : ( // 普通图标普通处理 <Scaler style={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
最后: 快要过年了,祝大家新年快乐