反应导航：增加底部标签导航的高度？

Question

我使用react-navigation为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

请小心 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 2

截至文档，它说要做tabBarOptions={style:{height:100}} 例如：

bottomNavigatorConfigs = {
   initialRouteName: "HomeScreen",
   tabBarOptions: {
       style:{height:300}
   }, 
};

这是bottomNavigatorConfigs（已测试）并正在工作的示例。

使用bottomNavigatorConfigs的方式是这样的：

createBottomTabNavigator(bottomRoutesConfig, bottomNavigatorConfigs);

资料来源：https : //reactnavigation.org/docs/en/bottom-tab-navigator.html