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

Question

我正在尝试使用 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>

Answer 1

//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}}

someNum可以是您决定的任何值。

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

您甚至可以将高度记录在最适合的位置，并通过除以windowHeight来使用该值来获得要在someNum中使用的比率。