a_zhon
Code-Porter
采纳率0%
2017-11-03 02:14 阅读 3.3k

React Native 使用react-navigation中的TabNavigator

2

图片说明
在Android是好的,在ios上要怎么设置才能然文字垂直居中

 export default Tab = TabNavigator({
    //每一个页面的配置
    Joke: {
        screen: Joke,
        navigationOptions: {
            tabBarLabel: '笑话',
        },
    },
    riddles: {
        screen: Riddles,
        navigationOptions: {
            tabBarLabel: '谜语',
        }
    }

}, {
    //设置TabNavigator的位置
    tabBarPosition: 'top',
    //当两个TabNavigator嵌套时需要这样设置
    animationEnabled: false,
    swipeEnabled: false,
    //按 back 键是否跳转到第一个Tab(首页), none 为不跳转
    backBehavior: "none",
    //设置Tab标签的属性
    tabBarOptions: {
        //共有属性
        showIcon: true,
        activeTintColor: constant.activeColor,//label和icon的前景色 活跃状态下(选中)
        inactiveTintColor: constant.primaryColor,//label和icon的前景色 活跃状态下(未选中)
        style: { //TabNavigator 的背景颜色
            backgroundColor: 'white',
        },
        indicatorStyle: {//标签指示器的样式对象(选项卡底部的行)。安卓底部会多出一条线,可以将height设置为0来暂时解决这个问题
            backgroundColor: constant.activeColor,
        },
        labelStyle: {//文字的样式
            fontSize: 14,
        },
        iconStyle: {
            height: 0,
            width: 0,
        }

    },
});
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

相关推荐