解决React Native中使用TabNavigator时、对tab只设置文字时文字没有垂直居中

使用react-navigation中的TabNavigator搭建标签导航栏的时候遇到了一个问题，

当我们对导航栏只需要设置文字，不设置图片的时候、在ios设备上你会发现文字没有垂直居中（在Android中是好的），

因为这个控件默认预留好了图片显示的位置 即使你将showIcon: false设置为false还是一样没有用，我们来看下效果图对比：

同时设置图片和文字是正常的

当只设置文字时

只需要设置文字时，文字一直在Tab的底部….

纠结了好几天在网上一直找不到答案非常的郁闷…. 幸好功夫不负有心人终于找了答案，看下垂直居中的效果图：

解决方案：单独给ios端设置一个tabStyle:{height:35}，这样就不会影响到Android端了

原文链接：http://www.cnblogs.com/moxiaoyan33/p/5710991.html

1.创建一个StyleSheet.js文件：

/**
 *根据ios android 设备设置不同的style
 */

import {StyleSheet,Platform} from 'react-native';

export function create(styles: Object): { [name: string]: number } {
    const platformStyles = {};
    Object.keys(styles).forEach((name) => { let {ios,android,...style} = {...styles[name]}; if (ios && Platform.OS === 'ios') { style = {...style,...ios}; } if (android && Platform.OS === 'android') { style = {...style,...android}; } platformStyles[name] = style; }); return StyleSheet.create(platformStyles); }

2.在配置Tab的地方引用这个文件，设置样式。

const StyleSheet = require('../../../src/common/StyleSheet');

const styles = StyleSheet.create({
    tabStyle: {
        ios: {
            height: 35,},android: {},}
});
export default Tab = TabNavigator({

    Joke: {
        screen: Joke,navigationoptions: {
            tabBarLabel: '笑话',riddles: {
        screen: Riddles,navigationoptions: {
            tabBarLabel: '谜语',}
    }

},{
    //设置TabNavigator的位置
    tabBarPosition: 'top',//...
    tabBarOptions: {
        showIcon: false,//...
        tabStyle: styles.tabStyle,});

通过以上步骤就可以完美解决!

过程时心酸的，结果是美好的。