react-native-navigation TabNavigator选中状态和高度问题

Question

//底部导航
const Tabs = TabNavigator({
    NewsList: {
        screen: NewsList,
        navigationOptions: {  // 也可以写在组件的static navigationOptions内
            tabBarLabel: '首页',
            tabBarIcon: ({tintColor}) => (<Icon name="ios-home" size={26}/>),
        }
    },
    AddressBook: {
        screen: AddressBook,
        navigationOptions: {
            tabBarLabel: '通讯录',
            tabBarIcon: ({tintColor}) => (<Icon name="md-git-network" size={26}/>),
        }
    },
    GovernmentAffairs: {
        screen: GovernmentAffairs,
        navigationOptions: {
            tabBarLabel: '政务',
            tabBarIcon: ({tintColor}) => (<Icon name="ios-apps" size={26}/>),
        }
    },
    Life: {
        screen: Life,
        navigationOptions: {
            tabBarLabel: '生活',
            tabBarIcon: ({tintColor}) => (<Icon name="md-basket" size={26}/>),
        }
    },
    Main: {
        screen: Main,
        navigationOptions: {
            tabBarLabel: '我的',
            tabBarIcon: ({tintColor}) => (<Icon name="ios-contact" size={26}/>),
        }
    }
  }, {
      animationEnabled: true, // 切换页面时是否有动画效果
      tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的
      swipeEnabled: true, // 是否可以左右滑动切换tab
      lazy: true,//是否根据需要懒惰呈现标签，而不是提前 
      backBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
      tabBarOptions: {
          activeTintColor: '#028ce5', // 文字和图片选中颜色
          inactiveTintColor: '#999', // 文字和图片未选中颜色
          showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
          indicatorStyle: {
              height: 0  // 如TabBar下面显示有一条线，可以设高度为0后隐藏
          }, 
          style: {
              backgroundColor: '#fff', // TabBar 背景色
            //   height: 44,
              borderTopColor: '#ccc',
              borderTopWidth:1,
              padding: 0,
          },
          labelStyle: {
              fontSize: 10, // 文字大小
          },
      },
});

1.选中状态下为什么icon没有改变颜色？
2.设置高度后为什么tabBar显示不全，底部被遮挡？
请大神指教

Answer 1

第一个问题是要为icon标签添加style={{color:tintColor}}
第二个问题需要修改label的样式，通过相对定位调整位置

Answer 2

第一个问题是你没有在Icon这个标签中设置tintColor，当然不会改变颜色。
第二个问题，试下将Tab高度写的高点儿