先上一个效果：
dmeo.gif
之前也有一篇文章写过, 处理特殊的TabBarItem(利用自定义TabBarComponent方式), 这里利用了更简洁的方式处理
注: 所有界面的导航栏都是自定义
1. 可以看到开始时的广告(可作为动画广告)
代码:
/**@desc 2019/5/25 可作为倒计时广告*/
SCountdownButton: 自定义倒计时组件
class CountDownAD extends Component {
render() {
return (
<View style={styles.container}>
<Image source={Icon.ad_show} style={styles.adStyle}/>
<SCountdownButton
style={styles.timerStyle}
title={'跳过广告'}
timeLength={3}
isAutoCountdown={true}
onClick={this.skipAD}
endCountdownFunction={this.endCountdownFunction}
/>
</View>
);
}
// 跳过广告
skipAD = ()=>{
this.props.navigation.navigate('SRootRouter');
};
// 结束倒计时
endCountdownFunction = ()=>{
this.skipAD();
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
adStyle: {
flex: 1,
},
timerStyle: {
width: 60,
height: 60,
top: statusBarHeight + 10,
right: 30,
borderRadius: 40,
backgroundColor: 'rgba(170, 170, 170, 0.85)'
}
});
2. 路由结构 ==> 程序路口AppRouter
代码:
/**@desc 2019/5/24 路由设置*/
export const AppRouter = createAppContainer(
createSwitchNavigator(
{
CountDownAD,
// Edu,
"SRootRouter": SRootScreen,
},
{
initialRouteName: 'CountDownAD'
}
)
);
3. SRootScreen根路由
代码:
const RootRouter = createStackNavigator(
{
Tab: {
screen: STabScreen
},
Login: {
screen: SLoginScreen
},
Plus: {
screen: SPlusScreen
}
},
{
initialRouteName: 'Tab',
mode: "modal",
defaultNavigationOptions: ({navigation})=>({
header: null,
gesturesEnabled: false,
})
}
);
4.Tab路由
代码: 需要包裹一层StackNavigator, 除了需要Modal的界面, 所有push的界面需要在此处添加
const TabStackNavigator = createStackNavigator(
{
Tab: {
screen: TabBarNavigator
},
MyAccount: {
screen: MyAccount
},
SystemMsg: {
screen: SystemMsg
},
},
{
initialRouteName: 'Tab',
mode: "card",
defaultNavigationOptions: ({navigation})=>({
header: null,
gesturesEnabled: true,
})
}
);
创建底部栏createBottomTabNavigator
const TabBarNavigator = createBottomTabNavigator(
{
Campus: {
screen: Campus,
navigationOptions: ()=>sTabBarOptions('校园', Icon.tabBarItem_campus_def, Icon.tabBarItem_campus_sel)
},
Circle: {
screen: Circle,
navigationOptions: ()=>sTabBarOptions('圈子', Icon.tabBarItem_circle_def, Icon.tabBarItem_circle_sel)
},
// 占位组件, 但screen必须设置(否则报红)
PlaceholderComponent: {
screen: Plus,
},
Edu: {
screen: Edu,
navigationOptions: ()=>sTabBarOptions('教学', Icon.tabBarItem_edu_def, Icon.tabBarItem_edu_sel)
},
Me: {
screen: Me,
navigationOptions: ()=>sTabBarOptions('我', Icon.tabBarItem_me_def, Icon.tabBarItem_me_sel)
},
},
{
initialRouteName: 'Campus',
lazy: true,
// 此处设置的属性是控制全局, 而非某个局部组件
defaultNavigationOptions: ({navigation})=>({
tabBarOptions: {
inactiveTintColor: colorConfig.grayColor,
activeTintColor: colorConfig.themeColor,
labelStyle: {
fontSize: 13.5,
marginTop: 3.5
},
tabStyle: {
marginTop: 5
}
}
})
}
);
const sTabBarOptions = (tabBarItemTitle, tabBarItemDef, tabBarItemSel) =>{
const tabBarLabel = tabBarItemTitle;
const tabBarIcon = ({ focused, horizontal, tintColor })=> {
return !focused? <Image style={styles.tabBarIconStyle} source={tabBarItemDef}/> : <Image style={styles.tabBarIconStyle} source={tabBarItemSel}/>
};
return {tabBarLabel, tabBarIcon};
};
️: 单独设置Tab中间特殊TabBarItem
/**@desc 2019/5/25 独自设置 占位tabBarItem*/
Plus.navigationOptions = ({navigation}) =>{
// tabBarButtonComponent: 它包装图标和标签并实现onPress; 重写此属性;
// 返回数组, 还可以在数组中添加其他组件, 例如: 小红点
const tabBarButtonComponent: any = (props: any)=>{
return [<TouchableOpacity
{...props}
style={styles.plusTabBarItemStyle}
activeOpacity={1}
key={'tabBar'}
// 拦截点击事件, 点击后的selectedIndex保持原来的值
onPress={()=>navigation.navigate('Plus')}
>
<Image style={{width: 35, height: 35}} source={Icon.tabBarItem_plus}/>
</TouchableOpacity>];
};
return {tabBarButtonComponent}
};
