标签:文字 col 左右 tabbar 选中 text options logs stack
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/>) }
标签:文字 col 左右 tabbar 选中 text options logs stack
原文地址:http://www.cnblogs.com/insight0912/p/7772831.html