preface

As most of you who have been exposed to ReactNative(RN) know, React-Navigation provides two navigation bar components out of the box

  • createBottomTabNavigator
  • createMaterialBottomTabNavigator

Here’s the difference

Although the official navigation bar is provided out of the box, but in the actual development, we will encounter a variety of navigation bars, a variety of dynamic effects, so the above may not meet our development needs, we need to customize our navigation bar

For example, our UI gave me a navigation bar style

My heart: how do I do this he middle bulge, Lao Tze is just a small front end,app is very slag ah ah

With the help of the lovely Google, I found a solution

is

TabBarComponent

This API is poorly documented, so want to know how to use resources that are only available on the web

Which is deeply inspired by this copy

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

This foreign friend (said reactnative seems to have fire in foreign countries), using the animation library React-native pose, to achieve this effect

Although the blog is in English, it is easy to read with the basic translation. With the help of his blog, I completed the custom navigation bar of ReactNative. The effect is as follows

Customize the bottom navigation bar

  1. Custom bottom navigation bar is based oncreateBottomTabNavigator, so we use this API to create the bottom navigation bar
  2. The specifiedcreateBottomTabNavigatorThe tabBarComponent
  3. The bottom navigation bar is written inside the tabBarComponent

Add bottom navigator

import React from 'react'
import { createBottomTabNavigator } from 'react-navigation'
import Icon from '.. /Common/Icon' // Customize the icon library
import TabBar from '.. /Common/TabBar' // tabBarComponent Custom component
/ / page
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(
  {
    / / home page:
    one: {
      screen: Main,
      navigationOptions: (a)= > {
        return {
          tabBarIcon: ({ tintColor }) = > {
            var soureImge
            if (tintColor == '#CBCBCB') {
              soureImge = 'main'
            } else {
              soureImge = 'mainActive'
            }
            return<Icon name={soureImge} size={26} color={tintColor} />}}}}, { tabBarIcon: ({ tintColor }) => { var soureImge if (tintColor == '#CBCBCB') { soureImge = 'Category' } else { soureImge = 'CategoryActive'} return <Icon name={soureImge} size={26} color={tintColor} />}}}, OnlineDoctor, navigationOptions: { tabBarIcon: ({ tintColor }) => { var soureImge if (tintColor == '#CBCBCB') { soureImge = 'onLine' } else { soureImge = 'onLineActive'} return <Icon name={soureImge} size={48} color={tintColor} />}}, OrderList, navigationOptions: { tabBarIcon: ({ tintColor }) => { var soureImge if (tintColor == '#CBCBCB') { soureImge = 'OrderList' } else { soureImge = 'OrderListActive'} return <Icon name={soureImge} size={26} color={tintColor} />}}, 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', // initialize page tabBarComponent: TabBar, tabBarOptions: {activeTintColor: '#F34C56', inactiveTintColor: '#CBCBCB'}})Copy the code

Tool function

Icon does not use icon library, directly make an icon library more handy

../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
Copy the code

But carries on the unified management to the picture

../Common/Image.js

/** * All image resources are managed from here */
// Bottom navigation bar image resources
export const TabIcon = {
  main: require('.. '),
  mainActive: require('.. '),
  Category: require('.. '),
  CategoryActive: require('.. '),
  onLine: require('.. '),
  onLineActive: require('.. '),
  OrderList: require('.. '),
  OrderListActive: require('.. '),
  My: require('.. '),
  MyActive: require('.. '),}Copy the code

Customize the bottom navigator

With everything set, it’s time to customize the bottom navigator just like you did with the React component

import React from 'react'
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  TouchableNativeFeedback,
  Dimensions
} from 'react-native'
import posed from 'react-native-pose' // React-native animation library

const Scaler = posed.View({ // Define click zoom
  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' ? (// Special processing for special ICONS<Scaler
                style={Styles.scalerOnline}
                pose={isRouteActive ? 'active' : 'inactive'}
              >
                {renderIcon({ route, focused: isRouteActive, tintColor })}
                <Text style={Styles.iconText}>{getLabelText({ route })}</Text>
              </Scaler>) : (// Common icon common processing<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
Copy the code

And the result is this

If you have such a need, you can check out the foreigner’s blog

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

Finally: the Chinese New Year is coming, I wish everyone a happy New Year