React-navigation：增加底部选项卡导航的高度？

Question

我使用反应导航为 React Native 应用程序创建了一个简单的选项卡导航。它工作正常，但我似乎无法调整它的高度。它最多只会达到 80 左右，我需要它约为当前高度的 150%，也许是两倍。

有谁知道如何增加选项卡导航的高度（最好不要创建大约 6 个以上的 js 文件？）我只有有限的时间来修复它。

下面是导航代码

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from "react-navigation";

import HomeScreen from './screens/HomeScreen';
import AboutScreen from './screens/AboutScreen';
import SettingsScreen from './screens/SettingsScreen';


export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

const AppNavigator = createBottomTabNavigator({
  Home: {
    screen: HomeScreen
  },
  About: {
    screen: AboutScreen
  },
  Settings: {
    screen: SettingsScreen
  }
}, {
  initialRouteName: "Home"
});

const AppContainer = createAppContainer(AppNavigator);

谢谢

Answer 1

正如文档中所述，您只需添加

screenOptions={tabBarStyle:{height:100}}

例如：

bottomNavigatorConfigs = {
    initialRouteName: "HomeScreen",
    screenOptions: {
        tabBarStyle: { height: 300 },
    },
};

这是底部NavigatorConfigs（已测试）和工作的示例。

bottomNavigatorConfigs 的使用方式如下：

createBottomTabNavigator(bottomRoutesConfig, bottomNavigatorConfigs);

来源：https://reactnavigation.org/docs/bottom-tab-navigator/#options

Answer 2

请小心 iPhone 的 home 指示器，因为在设置绝对高度时需要考虑 iPhone 底部的额外空间。

import { useSafeAreaInsets } from 'react-native-safe-area-context';
...

export const Navigation = () => {
  const insets = useSafeAreaInsets();
  return (
    <NavigationContainer>
      <Tab.Navigator
        tabBarOptions={{
          style: {
            height: 60 + insets.bottom,
            ...
          },
          tabStyle: {
            height: 60,
            ...
          },
          ...
        }}>
        ...

Answer 3

使用 React navigation 6 你可以使用：

    tabBarStyle : {
         height: 150,
         ...
    }

Answer 4

tabBar选项：{ 风格： { 高度：'50%'， } }

尝试一下可能会有效。

Answer 5

screenOptions={
  {
    headerShown:false,
    tabBarActiveTintColor:Colors.primary,
    tabBarInactiveTintColor:Colors.primary2,
    tabBarStyle:  { height: 60 }
  } 
}

Answer 6

     <Tab.Navigator
       tabBarStyle: {
                      height: 20, 
                     //this increases the height of the 
                       tabNavigation 
                     }
      tabBarLabelStyle: {
                     height:40,
                    //increases height of the label or name 
                      that is below the icon
                         }
      >