离子和底部条仅在底部条中显示图标的一部分

问题描述

我用React Native创建了一个底部导航栏，无论出于什么原因，它看起来都很奇怪，我也不明白为什么。我放入其中的离子将切成两半，条也切成两半。

This是现在的状态栏

This应该是

我在底部添加和个性化代码的代码部分在这里

<Navigator
      tabBarOptions={{
        style: {
          elevation: 0,shadowOpacity: 0,height: 86,},tabStyle: {
          flexDirection: 'row',alignItems: 'center',justifyContent: 'center'
        },iconStyle: {
          flex: 0,width: 20,height: 20,labelStyle: {
          fontFamily: 'Archivo_700Bold',fontSize: 13,marginLeft: 16,inactiveBackgroundColor: '#fafafc',activeBackgroundColor: '#ebebf5',inactiveTintColor: '#c1bccc',activeTintColor: '#32264d'
      }}
    >
      <Screen
        name='TeacherList'
        component= {TeacherList}
        options={{
          tabBarLabel: 'Proffys',tabBarIcon: ({ color,size,focused }) => {
            return (
              <Ionicons name="ios-easel" size={size} color={ focused ? '#8257E5' : color } />
            )
          }
        }}
      />
      <Screen
        name='Favorites'
        component= {Favorites} 
        options={{
          tabBarLabel: 'Favoritos',focused }) => {
            return (
              <Ionicons name="ios-heart" size={size} color={ focused ? '#8257E5' : color } />
            )
          }
        }}
      />
    </Navigator>

我已经将我的代码与从事同一项目的其他人进行了比较，因为它来自一个指导性的开发班，所以我的语言对某些人来说完全相同，但是我的栏看起来很奇怪。

我不知道它有多重要，但是由于我应该在此处提供尽可能多的信息，因此我正在iPhone X上运行该应用程序。

谢谢，希望你们能帮助我！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ionicons navigationbar react-native