底部的图标无法居中

[Lcn29]

底部图标无法上下居中，按照楼主？（不知道叫什么好，233）图标能居中是通过 marginTop: 12.5 将图标挤下来，但是在我这里不起作用

是tab-navigator的版本不一样造成的吗？刚学习RN 太懂，有什么方法可以让图标居中的
下面代码

import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image
} from 'react-native';

import Header from './Header';
import TabNavigator from 'react-native-tab-navigator';

const HOME = 'home';
const HOME_NORMAL = require('./image/tabs/home_normal.png');
const HOME_FOCUS = require('./image/tabs/home_focus.png');
const CATEGORY = 'category';
const CATEGORY_NORMAL = require('./image/tabs/category_normal.png');
const CATEGORY_FOCUS = require('./image/tabs/category_focus.png');
const FAXIAN = 'faxian';
const FAXIAN_NORMAL = require('./image/tabs/faxian_normal.png');
const FAXIAN_FOCUS = require('./image/tabs/faxian_focus.png');
const CART = 'cart';
const CART_NORMAL = require('./image/tabs/cart_normal.png');
const CART_FOCUS = require('./image/tabs/cart_focus.png');
const PERSONAL = 'personal';
const PERSONAL_NORMAL = require('./image/tabs/personal_normal.png');
const PERSONAL_FOCUS = require('./image/tabs/personal_focus.png');

export default class MainScreen extends Component {

constructor(props) {
    super(props);
    this.state = {selectedTab: HOME}
}

_renderTabItem(img, selectedImg, tag, childView) {
    return (
        <TabNavigator.Item
            selected={this.state.selectedTab === tag}
            renderIcon={() => <Image style={styles.tabIcon} source={img}/>}
            renderSelectedIcon={() => <Image style={styles.tabIcon} source={selectedImg}/>}
            onPress={() => this.setState({ selectedTab: tag })}>
            {childView}
        </TabNavigator.Item>
    );
}

static _createChildView(tag) {
    return (
        <View style={{flex:1,backgroundColor:'#00baff',alignItems:'center',justifyContent:'center'}}>
            <Text style={{fontSize:22}}>{tag}</Text>
        </View>
    )
}

render() {
    return (
        <View style={{flex: 1}}>
            <Header />
            <TabNavigator hidesTabTouch={true} tabBarStyle={styles.tab}>
                {this._renderTabItem(HOME_NORMAL, HOME_FOCUS, HOME, MainScreen._createChildView(HOME))}
                {this._renderTabItem(CATEGORY_NORMAL, CATEGORY_FOCUS, CATEGORY, MainScreen._createChildView(CATEGORY))}
                {this._renderTabItem(FAXIAN_NORMAL, FAXIAN_FOCUS, FAXIAN, MainScreen._createChildView(FAXIAN))}
                {this._renderTabItem(CART_NORMAL, CART_FOCUS, CART, MainScreen._createChildView(CART))}
                {this._renderTabItem(PERSONAL_NORMAL, PERSONAL_FOCUS, PERSONAL, MainScreen._createChildView(PERSONAL))}
            </TabNavigator>
        </View >
    );
}

}

const styles = StyleSheet.create({
tab: {
height: 52,
backgroundColor: '#303030',
alignItems: 'center',
},
tabIcon: {
width: 30,
height: 35,
resizeMode: 'stretch',
marginTop: 12.5
}
});

[yuanguozheng]

@Lcn29 你应该是设置了flex:1，用布局查看器看看控件的大小吧

[Lcn29]

@yuanguozheng
我的布局里面用到了2次flex:1, 第一次 flex : 1 ,让整个View占满整个屏幕， 第二个flex :1 ,让 View 占满除了上面的状态栏，和下面的导航栏其余的空间，2个我都去掉了，第一个直接让下面的导航栏到了屏幕顶部，第二个去掉了没什么影响，

主要是我TabNavigator.Item 里面 的marginTop 不起作用，没法让图标 往下面移12像素

[yuanguozheng]

@Lcn29 试试在父View上用alignItems:center

[Lcn29]

还是没效果，试一下， 好像 每个tab位置的确定是通过定位确定的，无论tab栏的高度多大，没个tab距离底部的高度是固定的，

我给每个tab 加了一个 bottom ; -6(为什么是负的，我也不知道，，，) 可以让tab的位置移动，

[yuanguozheng]

@Lcn29 看了一下，应该是TabNavigation内部的控制有点问题，暂时先用bottom这种办法搞吧