(二).TabNavigator
- 基础用法/属性介绍
const Tab = TabNavigator(
{
Home: {
screen: Documents,
navigationOptions: ({ navigation }) => ({
tabBarLabel: 'Documents',
tabBarIcon: ({ focused, tintColor }) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('../../img/tabbar/pfb_tabbar_homepage@2x.png')}
selectedImage={require('../../img/tabbar/pfb_tabbar_homepage_selected@2x.png')}
/>)}),}
})
屏幕导航配置
-
screen：和导航的功能是一样的，对应界面名称，可以在其他页面通过这个screen传值和跳转。
-
navigationOptions：配置TabNavigator的一些属性
-
title：标题，会同时设置导航条和标签栏的title，还是不推荐这种方式。
-
tabBarVisible：是否隐藏标签栏。默认不隐藏(true)
-
tabBarIcon：设置标签栏的图标。需要给每个都设置。
-
tabBarLabel：设置标签栏的title。推荐这个方式。
标签栏配置 -
tabBarPosition：设置tabbar的位置，iOS默认在底部，安卓默认在顶部。（属性值：'top'，'bottom'）
-
swipeEnabled：是否允许在标签之间进行滑动。
-
animationEnabled：是否在更改标签时显示动画。
-
lazy：是否根据需要懒惰呈现标签，而不是提前制作，意思是在app打开的时候将底部标签栏全部加载，默认false,推荐改成true哦。
-
initialRouteName： 设置默认的页面组件
-
backBehavior：按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
-
tabBarOptions：配置标签栏的一些属性
iOS属性 -
activeTintColor：label和icon的前景色 活跃状态下（选中）。
-
activeBackgroundColor：label和icon的背景色 活跃状态下（选中） 。
-
inactiveTintColor：label和icon的前景色 不活跃状态下(未选中)。
-
inactiveBackgroundColor：label和icon的背景色 不活跃状态下（未选中）。
-
showLabel：是否显示label，默认开启。
-
style：tabbar的样式。
-
labelStyle：label的样式。
安卓属性 -
activeTintColor：label和icon的前景色 活跃状态下（选中） 。
-
inactiveTintColor：label和icon的前景色 不活跃状态下(未选中)。
-
showIcon：是否显示图标，默认关闭。
-
showLabel：是否显示label，默认开启。
-
style：tabbar的样式。
-
labelStyle：label的样式。
-
upperCaseLabel：是否使标签大写，默认为true。
-
pressColor：material涟漪效果的颜色（安卓版本需要大于5.0）。
-
pressOpacity：按压标签的透明度变化（安卓版本需要小于5.0）。
-
scrollEnabled：是否启用可滚动选项卡。
-
tabStyle：tab的样式。
-
indicatorStyle：标签指示器的样式对象（选项卡底部的行）。安卓底部会多出一条线，可以将height设置为0来暂时解决这个问题。
-
labelStyle：label的样式。
-
iconStyle：图标的样式。
ps：很多人问我,为什么安卓上的tabbar文字会下移, 是因为安卓比iOS多了一个属性,就是iconStyle,通过设置labelStyle和iconStyle两个样式,外加style的高度,来使效果更佳合理.
跳转
// 注册tabs
const Tabs = TabNavigator({
HomeTab: {
screen: MainScreen,
navigationOptions: { // 也可以写在组件的static navigationOptions内
tabBarLabel:'首页',//tab一的名称
tabBarIcon:({tintColor}) =>
(<Text style={[styles.bottomBarIcon,{fontFamily:'iconfont'},{color:tintColor}]}></Text>)// 这是名称上面要渲染的组件
}
},
BillTab: {
screen: MainScreen1,
navigationOptions: {
tabBarLabel:'账单',
tabBarIcon:({tintColor}) =>
(<Text style={[styles.bottomBarIcon,{fontFamily:'iconfont'},{color:tintColor}]}></Text>)
}
}
}, {
animationEnabled: true, // 切换页面时是否有动画效果
tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的
swipeEnabled: true, // 是否可以左右滑动切换tab
backBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
tabBarOptions: {
activeTintColor: '#ff8500', // 文字和图片选中颜色
inactiveTintColor: '#999', // 文字和图片未选中颜色
showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
indicatorStyle: {
height: 4 // 如TabBar下面显示有一条线，可以设高度为0后隐藏
},
style: {//这个样式是对整个tabNavigator生效的。
backgroundColor: '#fff', // TabBar 背景色
height: 60
},
labelStyle: {
fontSize: 10, // 文字大小
},
},
});
综合demo常用的底栏结构
const Tab = TabNavigator(
{
Home: {
screen: Documents,
navigationOptions: ({ navigation }) => ({
tabBarLabel: 'Documents',
tabBarIcon: ({ focused, tintColor }) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('../../img/tabbar/pfb_tabbar_homepage@2x.png')}
selectedImage={require('../../img/tabbar/pfb_tabbar_homepage_selected@2x.png')}
/>
)
}),
},
Nearby: {
screen: Notifications,
navigationOptions: ({ navigation }) => ({
tabBarLabel: 'Notifications',
tabBarIcon: ({ focused, tintColor }) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('../../img/tabbar/pfb_tabbar_merchant@2x.png')}
selectedImage={require('../../img/tabbar/pfb_tabbar_merchant_selected@2x.png')}
/>
)
}),
},
Order: {
screen: Submission,
navigationOptions: ({ navigation }) => ({
tabBarLabel: 'Submission',
tabBarIcon: ({ focused, tintColor }) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('../../img/tabbar/pfb_tabbar_order@2x.png')}
selectedImage={require('../../img/tabbar/pfb_tabbar_order_selected@2x.png')}
/>
)
}),
},
Mine: {
screen: Setting,
navigationOptions: ({ navigation }) => ({
tabBarLabel: 'Setting',
tabBarIcon: ({ focused, tintColor }) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('../../img/tabbar/pfb_tabbar_mine@2x.png')}
selectedImage={require('../../img/tabbar/pfb_tabbar_mine_selected@2x.png')}
/>
)
}),
},
},
{
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
swipeEnabled: false,
animationEnabled: false,
lazy: true,
tabBarOptions: {
activeTintColor: color.theme,
inactiveTintColor: '#979797',
style: { backgroundColor: '#ffffff' },
},
}
);
const Navigator = StackNavigator(
{
Tab: { screen: Tab },
Web: { screen: WebScene }
},
{
navigationOptions: {
// headerStyle: { backgroundColor: color.theme }
headerBackTitle: null,
headerTintColor: '#333333',
showIcon: true,
},
}
);
实质就是StackNavigator里嵌入TabNavigator
也可以采用ShiTu里TabNavigator嵌套StackNavigator方法（更类似与ios中每一个模块一个导航的思想，并不是只有这种情况可以实现model，上面的情况实现model也是没问题的，具体实现可以参考上一篇文章）
const ShiTuStack = StackNavigator({
ShiTu:{
screen:ShiTu,
navigationOptions: ()=> TabOptions('识兔',ShiTuIcon,ShiTuIcon,'识兔'),
},
Login:{
screen:Login,
navigationOptions:{
headerTitle:'Login',
}
}
},{
mode:'modal',
});
// 为了实现登录的modal效果,所以将Gank页面单独拆分出来.
const GankStack = StackNavigator({
Gank:{
screen:Gank,
navigationOptions: ()=> TabOptions('干货',GankIcon,GankIcon,'干货集中营'),
},
Login:{
screen:Login,
navigationOptions:{
headerTitle:'Login',
}
}
},{
mode:'modal',
});
//// 为了实现登录的modal效果,所以将Main页面单独拆分出来.
const MainStack = StackNavigator({
Main:{
screen:Main,
navigationOptions: ()=> TabOptions('个人中心',MainIcon,MainIcon,'个人中心'),
},
Login:{
screen:Login,
navigationOptions: ({navigation}) => LoginOptions({navigation})
}
},{
mode:'modal',
});
const MyTab = TabNavigator({
ShiTuStack: {
screen: ShiTuStack,
navigationOptions:{
header:null
}
},
GankStack: {
screen:GankStack,
navigationOptions:{
header:null
}
},
MainStack:{
screen:MainStack,
navigationOptions:{
header:null
}
},
}
}）
网友评论