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'
}
});
