Question

我在我的项目中使用了tab导航器，并在我的标签中使用了图像和标签，但是我无法找到将它们对齐在一起的确切解决方案，因为它们在不同版本的IOS中的显示方式不同。这是我的代码，我有2个标签导航器; outerTab和innerTab。

我在底部标签栏中按列方式对齐图标和标签，在顶部标签栏导航器中按行排列。

请查看附图，您可以在其中找到底部和顶部标签导航器的对齐问题。

export const OuterTab = TabNavigator({

tanks: {
    screen: TanksStack,
    navigationOptions: {
        tabBarLabel: 'Tanks',
        tabBarIcon: (
            <Image source={require('../logos/tab_assets.png')}
            style={[styles.icon, {color: '#ffffff'}]}
            />
        )
    },
},
alerts: {
    screen: AlertsStack,
    navigationOptions: {
        tabBarLabel: 'Alerts',
        tabBarIcon: (
            <Image source={require('../logos/tab_alerts.png')}
            style={[styles.icon, {color: '#ffffff'}]}
            />
        )
    },
},
Settings: {
    screen: Setting,
    navigationOptions: {
        tabBarLabel: 'Settings',
        tabBarIcon: (
            <Image source={require('../logos/tab_settings.png')}
            style={[styles.icon, {color: '#ffffff'}]}
            />
        )
    },
},
},
{
tabBarPosition: 'bottom',
  animationEnabled: true,
  swipeEnabled:false,
  tabBarOptions: {
    upperCaseLabel: false,
    showIcon: true,
    activeBackgroundColor:'#2394C7',
    inactiveBackgroundColor:'grey',
    tabStyle:{
      marginTop:(Platform.OS === 'ios') ? 0 : 10,
      height : 53,

    },
     indicatorStyle: {
        backgroundColor : '#2394C7',
        height :(Platform.OS === 'ios') ? 53 :  63,
      },

     style :{
         backgroundColor:'grey'
     },
    labelStyle: {
        fontSize: 15,
        fontWeight:'bold',
         marginTop: 0,
         color :'#ffffff'
    },
  },
});

和innerTab代码：

export const InnerTab = TabNavigator({
Map: {
    screen: MapStack,
    navigationOptions: {
          tabBarLabel: 'Map',
          tabBarIcon:  (
                <Image source={require('../logos/map.png')}
                style={[styles.icon, {color: '#ffffff'}]}
                />
          )
    },
},
List: {
    screen: ListStack,
    navigationOptions: {
          tabBarLabel: 'List',
          tabBarIcon:  (
                <Image source={require('../logos/list.png')}
                style={[styles.icon, {color: '#ffffff'}]}
                />
          )
    },
},
},
{
tabBarPosition: 'top',
  animationEnabled: true,
  swipeEnabled:false,
  tabBarOptions: {
    upperCaseLabel: false,
    showIcon: true,
    activeBackgroundColor:'#2394C7',
    inactiveBackgroundColor:'grey',
    tabStyle:{

      marginTop:(Platform.OS === 'ios') ? 0 : 10,
      height : 53,
      flexDirection : 'row' ,
      justifyContent : 'center',
      alignItems : 'center'


    },
     indicatorStyle: {
        backgroundColor : '#2394C7',
        height :(Platform.OS === 'ios') ? 53 :  63,
      },

     style :{

         backgroundColor:'grey'
     },
    labelStyle: {
        fontSize: 15,
        fontWeight:'bold',
        color :'#ffffff'
    },
  },
});

任何领导都将不胜感激。

在不同版本的IOS中使用选项卡导航器发现问题

0 个答案: