解决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,
    },
});

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

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