我目前正在使用Material-Bottom选项卡来实现移动应用程序中的导航。 由于一些奇怪的原因，它没有正确显示，而是被我的屏幕底部切断了。 我应该提到，无论我是否激活手势控制（因此Android内置导航栏消失），这都会发生。 如果我在我的Android手机（Android 10）上运行这个也是无关紧要的。

如果我在tabs.navigator的样式中添加了填充，那么Tab-Navigation-Bar仍然被截断，现在被一个白色填充所截断。

我试图将tab.navigator包装到SafeAreaView（从react-native-safe-area-context）中，但如果我这样做了，我只会得到一个纯白色的屏幕。

这是我的代码:

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;

显示问题的屏幕截图