React Navigation（七）-createTabNavigator(API)

最新推荐文章于 2024-09-10 05:36:05 发布

小xuanxuan

最新推荐文章于 2024-09-10 05:36:05 发布

阅读量3.7k

点赞数

注意：createTabNavigator不推荐，请使用createBottomTabNavigator或者createMaterialTopTabNavigator代替

createTabNavigator(RouteConfigs, TabNavigatorConfig);

RouteConfigs

又是这段话......

TabNavigatorConfig

tabBarComponent - 要用作tab bar的组件, 比如 TabBarBottom (iOS的默认项), TabBarTop (Android的默认项目).
tabBarPosition - tab bar的位置, 可以是 'top' 或者 'bottom'.
swipeEnabled - 是否允许滑动切换tab.
animationEnabled - 切换tab事是否有动画.
lazy - 默认是true. 如果是 false, 所有的tab页立即被渲染. 如果是true, tab只在激活时渲染.
removeClippedSubviews - 默认是 true. 通过释放非激活tab占用的资源来减少内存使用的优化选项.
initialLayout - 包含初始 height 和 width的可选对象，可以被传递以防止单帧延迟.
tabBarOptions - 配置tab bar, 往下看.

传递到底层路由器的若干属性，可以修改导航逻辑

initialRouteName - 首次加载时，初始tab路由的名称.
order - 定义了tab顺序的路由名称数组.
paths - 路由名称与路由配置的映射，覆盖第一个参数中的设置.
backBehavior - back按钮是否触发返回第一个tab。如果是, 设置成 initialRoute, 否则 none. 默认 initialRoute .

TabBarBottom的tabBarOptions（iOS）

activeTintColor - 活动tab的标签和图标颜色.
activeBackgroundColor - 活动tab的背景颜色.
inactiveTintColor - 非活动tab的标签和图标颜色.
inactiveBackgroundColor - 非活动tab的背景颜色.
showLabel - 是否为tab显示标签，默认true.
style - tab bar的style.
labelStyle - 标签的style.
tabStyle - tab的style.
allowFontScaling - Whether label font should scale to respect Text Size accessibility settings, default is true.

tabBarOptions: {
  activeTintColor: '#e91e63',
  labelStyle: {
    fontSize: 12,
  },
  style: {
    backgroundColor: 'blue',
  },
}

TabBarTop的tabBarOptions（Android）

activeTintColor - Label and icon color of the active tab.
inactiveTintColor - Label and icon color of the inactive tab.
showIcon - 是否显示tab的图标, 默认 false.
showLabel - 是否显示tab的标签, 默认 true.
upperCaseLabel - 标签是否大写, 默认 true.
pressColor - 波纹颜色 (Android >= 5.0 only).
pressOpacity - 按下的tab的透明度 (iOS and Android < 5.0 only).
scrollEnabled - tab是否可滚动.
tabStyle - tab的style.
indicatorStyle - tab指示器的style (tab底下的横线).
labelStyle -标签的style.
iconStyle - 图标的style.
style - tab bar的style.
allowFontScaling - Whether label font should scale to respect Text Size accessibility settings, default is true.

tabBarOptions: {
  labelStyle: {
    fontSize: 12,
  },
  tabStyle: {
    width: 100,
  },
  style: {
    backgroundColor: 'blue',
  },
}

导航器内screen的navigationOptions

title

headerTitle和tabBatLabel的通用备选标题

tabBarVisible

是否显示隐藏tab bar 没有设置默认为true

swipeEnabled

是否允许tab之间进行滑动切换，如果没有设置，则默认使用TabNavigator Config中的swipeEnabled。

tabBarIcon

react元素或者人会React.Node的函数{focused：Boolean，tintColor：string},显示在tab bar中

tabBarLabel

tab bar中，一个tab中显示的字符，或者是react元素，返回React.Node的函数。未定义时使用title属性的值。想要隐藏，参考上一部分中tabBarOptions.showLabel。

tabBarOnPress

处理触摸事件的回调，参数是对象，包含：

关注