React_Native 再学习3——导航进阶之TabNavigator

React_Native 再学习3——导航进阶之TabNavigator

参考:

http://www.bijishequ.com/detail/434067

简单的例子:

从使用结构上来看,它的整体使用结构和StackNavigator相同。

const Tab = TabNavigator(TabRouteConfigs, TabNavigatorConfigs);

只是需要特别注意的是:

在screen用到的是navigationOptions这个设置项:

title - 可以作为头部标题headerTitle,或者Tab标题tabBarLabel

TabNavigatorConfig

TabNavigator有两种模式,一种是顶部的,一种是底部的。所以这里的TabNavigatorConfig有两种模式的配置TabBarBottom和TabBarTop两个值。

通用的属性

TabBarTop - 在页面的顶部

TabBarBottom - 在页面的底部

tabBarPosition - Tab选项卡的位置,有 top 或 bottom两个值

swipeEnabled - 是否可以滑动切换Tab选项卡

animationEnabled - 点击Tab选项卡切换界面是否需要动画

lazy - 是否懒加载页面

initialRouteName - 初始显示的Tab对应的页面路由名称

order - 用路由名称数组来表示Tab选项卡的顺序,默认为路由配置顺序

paths - 路径配置

backBehavior - androd点击返回键时的处理,有initialRoute和none两个值

initailRoute - 返回初始界面

none - 退出

tabBarOptions - Tab配置属性,用在TabBarTop和TabBarBottom时有些属性不一致:

用于TabBarTop时:

activeTintColor - 选中的文字颜色

inactiveTintColor - 未选中的文字颜色

showIcon - 是否显示图标,默认显示

showLabel - 是否显示标签,默认显示

upperCaseLabel - 是否使用大写字母,默认使用

pressColor - android 5.0以上的MD风格波纹颜色

pressOpacity - android 5.0以下或者iOS按下的透明度

scrollEnabled - 是否可以滚动

tabStyle - 单个Tab的样式

indicatorStyle - 指示器的样式

labelStyle - 标签的样式

iconStyle - icon的样式

style - 整个TabBar的样式

用于TabBarBottom时:

activeTintColor - 选中Tab的文字颜色

activeBackgroundColor - 选中Tab的背景颜色

inactiveTintColor - 未选中Tab的的文字颜色

inactiveBackgroundColor - 未选中Tab的背景颜色

showLabel - 是否显示标题,默认显示

style - 整个TabBar的样式

labelStyle - 标签的样式

tabStyle - 单个Tab的样式

 

顶部的TabNavigator:

底部的TabNavigator



效果:

问题:

上面的使用会遇到个问题:就是点击手机的back键是回到第一个tab1,然后再点击back才会退出当前页面的栈。

这里需要设置这个属性。

 

 

 

 

 

 

 

 

 

 

 

 

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页