自定义底部导航栏样式

最新推荐文章于 2024-02-04 07:58:26 发布

zarek_jiamu

最新推荐文章于 2024-02-04 07:58:26 发布

阅读量674

点赞数 1

分类专栏： reacte native

本文链接：https://blog.csdn.net/zarek_jiamu/article/details/90572957

版权

reacte native 专栏收录该内容

4 篇文章 0 订阅

订阅专栏


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";
// 页面数组
const pages=[
    {name:'首页', pageName:'HomePage',page:HomePage},
    {name:'通讯录', pageName:'ActivePage',page:ActivePage},
    {name:'动态', pageName:'Add',page:HomePage},
    {name:'消息', pageName:'New',page:HomePage},
    {name:'我的', pageName:'My',page:ActivePage},
];

// 构造导航配置
function getPageInfo(){
    // 声明返回的导航配置信息
    const pageConfig={};
    // 循环页面导航信息自定义导航
    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:{
            // 禁止显示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'
    }
});