React-Native 选项卡导航栏被截断

Question

我目前正在使用 material-bottom-tabs 在我的移动应用程序中实现导航。

由于某些奇怪的原因，它没有正确显示，而是在我的屏幕底部被截断了。

无论我是否激活手势控制（因此 Android 内置导航栏消失），都会发生这种情况。

如果我在 Tabs.Navigator 的样式中添加填充，那么 Tab-Navigation-Bar 仍然被切断，现在被白色填充。

我试图将我的 Tab.Navigator 包裹在 SafeAreaView 中（来自 react-native-safe-area-context），但如果我这样做，我只会得到一个普通的白色屏幕。

这是我的代码：

import React, { Component } from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import DrawerHome from './DrawerHome';
import Bookmarks from './Bookmarks';

const Tab = createMaterialBottomTabNavigator();
const Stack = createStackNavigator();
//const insets = useSafeArea();

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userToken: 1, // set to 'null' in production state
    };
  }
  render() {
    return this.userToken === null ? (
      <Stack.Screen name="LogIn" component={LoginScreen} />
    ) : (
      <SafeAreaProvider>
        <NavigationContainer>
          <SafeAreaView>
            <Tab.Navigator style={{ paddingBottom: '10%' }}>
              <Tab.Screen
                name="Current Schedule"
                component={CarouselPage}
                options={{
                  tabBarLabel: 'Current\nSchedule',
                  tabBarIcon: <Ionicons name="ios-calendar" size={20} />,
                }}
              />
              <Tab.Screen name="Resources" component={ResourceScreen} />
              <Tab.Screen
                name="Schedule Selection"
                component={ScheduleSelectionScreen}
              />
              <Tab.Screen name="About" component={AboutScreen} />
            </Tab.Navigator>
          </SafeAreaView>
        </NavigationContainer>
      </SafeAreaProvider>
    );
  }
}

export default App;

A screenshot of the display issue

Answer 1

试试这个：

// ...
<NavigationContainer>
  <Tab.Navigator>
    <Tab.Screen
      name="Current Schedule"
      component={CarouselPage}
      options={{
        tabBarLabel: 'Schedule',
        tabBarIcon: ({}) => (
            <Ionicons name="ios-calendar" size={20} />
        ),
      }}
    />
    // ...
  </Tab.Navigator>
</NavigationContainer>
// ...

酒吧没有被切断。文本被截断的原因是，因为您在 tabBarLabel 文本中放置了一个换行符。我建议为标签标签选择更短的词。

文档似乎没有提供增加标签的填充以允许更长文本的选项。

React-Native 选项卡导航栏被截断

React-Native Tab Navigation Bar cut off

android

ios

react-native

react-navigation

react-native-safe-area-view