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}
   }, 
};

这是bottomNavigatorConfig（经过测试）并可以正常工作的示例。

bottomNavigatorConfigs的用法如下：

createBottomTabNavigator(bottomRoutesConfig, bottomNavigatorConfigs);

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

Answer 2

tabBarOptions：{ 风格：{ 高度：“ 50％”， } }

尝试可能有效。

Answer 3

使用 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,
            ...
          },
          ...
        }}>
        ...

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

3 个答案: