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中使用的比率来使用该值。

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

1 个答案: