andriod: title text is not in the middle

[rendongsc]

 <TabNavigator>
            <TabNavigator.Item
                selected={this.props.tab === 'home'}
                onPress={this.switchTab('home')}
                renderIcon={() => <Icon name="home" size={24} />}
                renderSelectedIcon={() => <Icon name="home" size={24} color="#09BB07" />}
                selectedTitleStyle={{color:"#09BB07"}}
                title={TABBAR.home}>

                <Home navigator={navigator}/>
            </TabNavigator.Item>

            <TabNavigator.Item
                selected={this.props.tab === 'list'}
                title={TABBAR.list}
                renderIcon={() => <Icon name="bars" size={24}  />}
                renderSelectedIcon={() => <Icon name="bars" size={24} color="#09BB07" />}
                selectedTitleStyle={{color:"#09BB07"}}
                onPress={this.switchTab('list')}>
                <List />
            </TabNavigator.Item>

            <TabNavigator.Item
                selected={this.props.tab === 'me'}
                title={TABBAR.me}
                renderIcon={() => <Icon name="user" size={24} />}
                renderSelectedIcon={() => <Icon name="user" size={24} color="#09BB07" />}
                selectedTitleStyle={{color:"#09BB07"}}
                onPress={this.switchTab('me')}>
                <Me />
            </TabNavigator.Item>
        </TabNavigator>

[ide]

That title isn't in the tab bar is it? Looks like an issue with your navigator component.