定制化你的ReactNative底部导航栏

时间 2019-11-08

标签定制 reactnative 底部导航繁體版

原文原文链接

前言

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

分别是这样的前端

尽管官方提供了导航栏的开箱即用方案,可是实际开发里面,咱们会遇到各类各样的导航栏,各类各样的动效,因此以上可能没法知足咱们的开发需求,咱们就须要定制化的去作咱们导航栏react

例如咱们UI给个人导航栏样式react-native

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

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

就是app

TabBarComponent

这个api在文档资料不多,因此想要知道怎么用只能经过网络上的资源了函数

其中深受这篇文案的启发工具

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

这位外国友人(话说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 <Icon name={soureImge} size={26} color={tintColor} />
          }
        }
      }
    },
    //分类:
     two: {
      screen: Category,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => {
          var soureImge
          if (tintColor == '#CBCBCB') {
            soureImge = 'Category'
          } else {
            soureImge = 'CategoryActive'
          }
          return <Icon name={soureImge} size={26} color={tintColor} />
        }
      }
    },
    //问诊:
    three: {
      screen: OnlineDoctor,
      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

最后: 快要过年了,祝你们新年快乐