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

问题描述 投票:0回答:1

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

as shown in this image

这是我的代码:

标签堆栈

<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>
javascript react-native react-navigation
1个回答
0
投票
//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}}
© www.soinside.com 2019 - 2024. All rights reserved.