顶部选项卡导航器 tabBar 浮动在 Android 导航栏下方

Question

我正在使用 React Navigation 中的 Material Top Tabs Navigator，以及自定义

tabBar

组件，如官方 docs 中的示例所示。

同时，我正在使用 Native Stack Navigator。顶部选项卡导航器（将位置设置为底部）嵌套在堆栈屏幕之一内。

一切正常，除了当我在承载选项卡导航器的屏幕上设置

navigationBarColor

选项时，

tabBar

浮动/落在 Android 导航栏后面，使其不完全可见。

设置 navigationBarColor 的行为就破坏了布局。

     <Stack.Screen
        options={{ headerShown: false, navigationBarColor: '#121212' }}
        name="MainScreen"
        component={MainScreen}
      />

Answer 1

通过添加

react-native-safe-area-context

中的插图进行修复，并针对 iOS/Android 变体进行一些微调：

  const insets = useSafeAreaInsets();

  const bottomInsetMargin = Platform.select({
    ios: 0,
    android: insets.bottom,
  });
  const bottomInsetPadding = Platform.select({
    ios: 16,
    android: 0,
  });