Javascript 小屏幕上的反应导航选项卡太大

我正在尝试使用React Navigation在React Native中创建一个底部选项卡，它在2160x1080和1920×1080屏幕上运行得非常好，但是当我在480x800或更小的屏幕上尝试应用程序时，我得到了一个拉伸的底部选项卡

这是我的代码：

选项卡堆栈

<TabStack.Navigator initialRouteName="Home">
    <TabStack.Screen
      name="Bills"
      component={BillsScreen}
      options={{
        tabBarIcon: ({color, size}) => (
          <Icon name="cash-multiple" color={color} size={30} />
        ),
      }}
    />
    <TabStack.Screen
      name="Loans"
      component={LoansScreen}
      options={{
        tabBarIcon: ({color, size}) => (
          <Icon name="restore-clock" color={color} size={30} />
        ),
      }}
    />
    <TabStack.Screen
      name="Home"
      component={HomeScreen}
      options={{
        tabBarIcon: ({color, size}) => (
          <Icon name="home-outline" color={color} size={30} />
        ),
      }}
    />
   ...
  </TabStack.Navigator>

(
),
}}
/>
(
),
}}
/>
(
),
}}
/>
...

主堆栈：

 <HomeStack.Navigator initialRouteName="Tab" screenOptions={screenOptions}>
    <HomeStack.Screen
      name="Tab"
      component={CreateTabStack}
      options={{headerShown: false}}
    />
    <HomeStack.Screen name="Invest" component={InvestScreen} />
    <HomeStack.Screen
      name="Pay"
      component={PaymentScreen}
      options={{headerShown: false}}
    />
  </HomeStack.Navigator>

根堆栈：

<NavigationContainer>
      <RootStack.Navigator headerMode="none">
        {user ? (
          <RootStack.Screen name="HomeStack" component={CreateHomeStack} />
        ) : (
          <RootStack.Screen name="AuthStack" component={CreateAuthStack} />
        )}
      </RootStack.Navigator>
    </NavigationContainer>

{用户(
) : (
)}

someNum

可以是您决定的任何值

这将是一种动态方法，在所有不同的屏幕上都有相同的行为

---

您甚至可以在最合适的位置记录高度，并通过除以

窗口高度

来使用该值，以获得在

someNum中使用的比率

您是否尝试减小尺寸？

//Calculate windowHeight Dimention to make sure its the same ratio
//everywhere
import {Dimensions} from 'react-native';
const windowHeight = Dimensions.get('window').height;

//Call to set dynamic height change of tabBar using ratio 
tabBarOptions={style:{height:windowHeight/someNum}}