Customize Bottom Navigation Bar Style


import React,{Component} from "react";
import {
    createBottomTabNavigator
} from "react-navigation";
import {View,Text,StyleSheet} from 'react-native';
import HomePage from "../pages/HomePage";
import ActivePage from "../pages/ActivePage";
// page array
const pages=[
    {name:'Home', pageName:'HomePage',page:HomePage},
    {name:'Address Book', pageName:'ActivePage',page:ActivePage},
    {name:'dynamic', pageName:'Add',page:HomePage},
    {name:'Message', pageName:'New',page:HomePage},
    {name:'My', pageName:'My',page:ActivePage},
];

// Construct the navigation configuration
function getPageInfo(){
    // Declare the returned navigation configuration information
    const pageConfig={};
    // Loop page navigation information custom navigation
    pages.map((item,index)=>{
        pageConfig[item.pageName]={
            screen:item.page,
            navigationOptions: ({navigation})=>({
                tabBarIcon: ({focused})=>(
                    <TabBar info={{pageNum:index,...navigation,isSelect:focused,name:item.name}}  ></TabBar>
                )
            })
        }
    });
    return pageConfig;
}
export default createBottomTabNavigator(getPageInfo(),{
    defaultNavigationOptions:{
        tabBarOptions: {
            // disable label
            showLabel:false
        },
    }
},);

class TabBar extends Component{
    render(){
        const {pageNum,isSelect,name}=this.props.info;
        if(pageNum===2){
            return <View style={{
                justifyContent:'center',
                alignItems:'center',
                flex:1
            }}>
                <Text style={{color:'#ffa612',fontSize: 60,lineHeight:65}}>+</Text>
            </View>
        }else {
            if(isSelect){
                return <View style={styles.okBar}>
                    <View style={styles.okBarDom}>
                        <Text style={{color:'#fff'}}>{name}</Text>
                    </View>
                </View>
            }else {
                return <View style={{
                    justifyContent:'center',
                    alignItems:'center',
                    flex:1
                }}>
                    <View style={{
                        width:30,
                        height:30,
                        borderWidth:.7,
                        borderColor:'#555'
                    }}></View>
                    <Text style={{color:'#555',fontSize:10}}>{name}</Text>
                </View>
            }
        }
    }
}

const styles=StyleSheet.create({
    okBar:{
        paddingTop:12,
        width:100,
        height:86,
        alignItems:'center',
        backgroundColor:'#fff',
        borderTopRightRadius:50,
        borderTopLeftRadius:50
    },
    okBarDom: {
        width:44,
        height:44,
        alignItems:'center',
        justifyContent:'center',
        backgroundColor: "#ffa612",
        borderRadius: 22
    },
    noBar:{
        width:45,
        height:45,
        color:'#ffa612',
        alignItems:'center',
        justifyContent:'center'
    }
});

Tags: Customize Bottom Navigation Bar Style

reacte native

Related: Customize Bottom Navigation Bar Style