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;

顯示問題的屏幕截圖

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文本中添加了換行符。 我建議為標簽標簽選擇較短的單詞。

該文檔似乎沒有提供增加 label 的填充以允許更長文本的選項。