//tabbar
const Main = createBottomTabNavigator({
//每一个页面的配置
Home: {
screen: Home,
},
Reimbursement: {
screen: Reimbursement,
},
Ticket: {
screen: Ticket,
},
Mine: {
screen: Mine,
},
}, {
navigationOptions:({ navigation }) => ({
tabBarLabel:({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if(routeName === 'Home') {
iconName = '首页';
} else if(routeName === 'Reimbursement') {
iconName = '报账';
} else if(routeName === 'Ticket') {
iconName = '票夹';
} else if(routeName === 'Mine') {
iconName = '我的';
}
return {iconName}
},
tabBarOptions: {
//设置TabNavigator的位置
tabBarPosition: 'bottom',
//是否在更改标签时显示动画
animationEnabled: false,
//是否允许在标签之间进行滑动
swipeEnabled: false,
//按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
backBehavior: "none",
//Android属性
upperCaseLabel: false,//是否使标签大写，默认为true
//共有属性
showIcon: true,//是否显示图标，默认关闭
showLabel: true,//是否显示label，默认开启
activeTintColor: 'rgba(255,201,69,1)',//label和icon的前景色 活跃状态下（选中）
inactiveTintColor: 'gray',//label和icon的前景色 活跃状态下（未选中）
style: { //TabNavigator的背景颜色
backgroundColor: 'white',
height: 55,
},
indicatorStyle: {//标签指示器的样式对象（选项卡底部的行）。安卓底部会多出一条线，可以将height设置为0来暂时解决这个问题
height: 0,
},
},
tabBarIcon:({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
let selectName;
if(routeName === 'Home') {
iconName = 'home-icon-home-normal';
selectName = 'home-icon-home-selected';
} else if(routeName === 'Reimbursement') {
iconName = 'home-icon-reimbursement-normal';
selectName = 'home-icon-reimbursement-selected';
} else if(routeName === 'Ticket') {
iconName = 'home-icon-home-normal';
selectName = 'home-icon-home-selected';
} else if(routeName === 'Mine') {
iconName = 'home-icon-mine-normal';
selectName = 'home-icon-mine-selected';
}
{
if(focused) {
return(
source={{ uri: selectName }}
style={{ height: 24, width: 24 }}
/>
)
} {
return(
source={{ uri: iconName}}
style={{ height: 24, width: 24 }}
/>
)
}
}
},
}),
});
//NAV
export
default function configAppcrearNavigator(isLoggedIn) {
return createStackNavigator({
Login: {
screen: Login,
navigationOptions: {
header: null,
headerBackTitle: null
}
},
Main: {
screen: Main,
navigationOptions: {
header: null,
}
},
},
{
//初始化界面
initialRouteName: isLoggedIn == 2 ? 'Guide' : isLoggedIn ? 'Main' : 'Main',
//统一NAV配置
navigationOptions:({ navigation, screenProps }) => ({
gesturesEnabled: false,
}),
headerLeft:(() => {
var routeName = navigation.state.routeName;
if(routeName === 'Main') {
return null;
} else {
return(
position: 'absolute', left: 10, bottom: 0,
width: 44, height: 44, flexDirection: 'column-reverse', paddingBottom: 10
}}
onPress={() => {
let { state: { routes } } = navigation;
console.log('RealNameIdentification navigation', navigation)
console.log('routes', routes);
navigation.goBack()
}}
>
style={{ width: 11, height: 18 }}
source={{ uri: '7copy' }}
/>
);
}
}),
})
},
)
};
引用
const AppNavigator = configAppNavigator(checkedLogin);
return(
<AppNavigator />
);
网友评论