我的标签导航栏在模拟器上看起来很正常，在手机上看起来很宽

如何解决我的标签导航栏在模拟器上看起来很正常，在手机上看起来很宽

当我在博览会上测试我的应用程序时，它看起来不错，但是当我在手机上使用它时，它变得太宽了，希望将菜单栏设置为适用于android和ios的标准尺寸，我已经尝试了一些事情，但到目前为止我还没有解决办法，谢谢

  return(
    
    <Tab.Navigator
    screenoptions={({ route }) => ({
      tabBarIcon: ({ color,size }) => {
        let iconName;

        if (route.name === 'Home') {
          iconName = 'md-home'; size=30;
        } else if (route.name === 'User') {
          iconName = 'md-person'; size=30;
        }
          else if (route.name === 'Notifications') {
          iconName = 'md-notifications'; size=30;
        }
          else if (route.name === 'Chat') {
          iconName = 'md-chatbubbles'; size=30;
        }

        // You can return any component that you like here!
        return <Ionicons name={iconName} size={size} color={color} />;
      },})}
    tabBarOptions={{
      style: {
        backgroundColor: '#45108A'
      },showLabel: false,activeTintColor: '#fff',inactiveTintColor: Colors.grey400,}}>

      
      <Tab.Screen name='Home' component={Home} />
      <Tab.Screen name='User' component={User} />
      <Tab.Screen name='Notifications' component={Notifications} />
      <Tab.Screen name='Chat' component={Chat} />
    </Tab.Navigator>
  )
}

const Tab = createBottomTabNavigator();

export default function App (){
  return (    
    <NavigationContainer>
      <Tabs />
    </NavigationContainer>
  );
  
} ```


here's an image to help you understand the problem.

  [1]: https://i.stack.imgur.com/TpHVR.jpg