码迷,mamicode.com
首页 > 其他好文 > 详细

react-navigation

时间:2017-11-02 17:03:55      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:文字   col   左右   tabbar   选中   text   options   logs   stack   

TabNavigator的使用
  定义一个整体的tab属性

import {TabNavigator,StackNavigator,TabBarBottom} from ‘react-navigation‘

const
MyTab = TabNavigator({ Home: { screen: Main, navigationOptions: ({navigation}) => ({ tabBarLabel:主页 }), }, Manage: { screen: UserManage, navigationOptions: ({navigation}) => ({ tabBarLabel:管理 }), }, Today: { screen: UserToday, navigationOptions: ({navigation}) => ({ tabBarLabel:今日 }), } }, { tabBarComponent:TabBarBottom,, animationEnabled: false, // 切换页面时是否有动画效果 tabBarPosition: bottom, // 显示在底端,android 默认是显示在页面顶端的 swipeEnabled: true, // 是否可以左右滑动切换tab backBehavior: none, // 按 back 键是否跳转到第一个Tab(首页), none 为不跳转 lazy:true, tabBarOptions: { activeTintColor: #ff8500, // 文字和图片选中颜色 inactiveTintColor: #999, // 文字和图片未选中颜色 showIcon: false, // android 默认不显示 icon, 需要设置为 true 才会显示 indicatorStyle: { height: 0 // 如TabBar下面显示有一条线,可以设高度为0后隐藏 }, style: { backgroundColor: #fff, // TabBar 背景色 // height: 30 }, labelStyle: { fontSize: 20, // 文字大小 }, }, });
Main、UserManage、UserToday是react组件
tabBarComponent:TabBarBottom //这一条一定要加,不加跳转有卡顿,TabBarBottom引用自react-navgition
// 渲染返回定义好的tab
render(){   
return(<MyTab/>) }

 

 

 

react-navigation

标签:文字   col   左右   tabbar   选中   text   options   logs   stack   

原文地址:http://www.cnblogs.com/insight0912/p/7772831.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!