React-navigation:增加底部标签导航的高度?

问题描述

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

I created a simple tab navigation for a React Native app using react-navigation. It works fine, but I can't seem to adjust the height of it. It'll only go to a max of about 80, I need it to be about 150% of the current height, maybe double.

有谁知道如何增加选项卡导航的高度(最好不要再创建大约 6 个 js 文件?)我只有有限的时间来修复它.

Does anyone know how to increase the height of the tab nav (preferably without creating about 6 more js files? ) I only have a limited period to fix it as I'd like.

以下是导航代码原样

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);

谢谢

推荐答案

如文档中所说，你只需要添加 tabBarOptions={style:{height:100}}

As said in the docs, you just need to add tabBarOptions={style:{height:100}}

例如:

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

这是bottomNavigatorConfigs(已测试)和工作的示例.

This is an example of the bottomNavigatorConfigs (tested) and working.

bottomNavigatorConfigs 的用法如下:

Where bottomNavigatorConfigs is used like this:

createBottomTabNavigator(bottomRoutesConfig, bottomNavigatorConfigs);

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

这篇关于React-navigation:增加底部标签导航的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！