react-native - React-navigation:增加底部标签导航的高度？

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

如文档中所述，您只需要添加 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