React native 无法更改暗模式下底部选项卡的安全区域颜色

我从昨天起就一直被困在这个问题上，我找不到解决办法

我一直在尝试调整iPhoneX中safeArea的颜色，对于没有选项卡的屏幕，它在顶部和底部都工作得很好，但是，在有选项卡导航器的屏幕中，底部safeArea始终是白色的，如屏幕截图所示。有人知道如何解决这个问题吗

另外，我想问一下，是否最好使用普通的SafeAreaView组件并删除SafeAreaProvider和react native SafeArea上下文包，我刚刚添加它作为解决此问题的尝试，但我首先使用react National SafeAreaView组件

应用程序内组件：

import { SafeAreaProvider } from "react-native-safe-area-context";
          <SafeAreaProvider>
            <NavigationContainer>
              <CatNavigator />
            </NavigationContainer>
          </SafeAreaProvider>

const CatNavigator = () => {
  return (
    <Drawer.Navigator
      initialRouteName="Home"    >
      <Drawer.Screen
        name="Home"
        component={SettingsNavigator}
        options={{ title: "Inicio" }}
      />
    </Drawer.Navigator>

在CatNavigator组件中：

import { SafeAreaProvider } from "react-native-safe-area-context";
          <SafeAreaProvider>
            <NavigationContainer>
              <CatNavigator />
            </NavigationContainer>
          </SafeAreaProvider>

const CatNavigator = () => {
  return (
    <Drawer.Navigator
      initialRouteName="Home"    >
      <Drawer.Screen
        name="Home"
        component={SettingsNavigator}
        options={{ title: "Inicio" }}
      />
    </Drawer.Navigator>

在“设置”选项卡导航器中：

const SettingsNavigator = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;
          const iconType = Platform.OS === "ios" ? "ios" : "md";
          if (route.name === "Home") {
            iconName = iconType + "-home";
          } else if (route.name === "Settings") {
            iconName = iconType + "-settings";
          }
          const tabColor = focused ? Colors.buttonBackColor : Colors.titleColor;
          return <Ionicons name={iconName} size={size} color={color} />;
        },
      })}
      tabBarOptions={{
        activeTintColor: Colors.activeTabColor,
        inactiveTintColor: Colors.inactiveTabColor,
        activeBackgroundColor: Colors.tabBackgroundColor,
        inactiveBackgroundColor: Colors.tabBackgroundColor,
        safeAreaInset: { bottom: "never", top: "never" },
      }}
    >
      <Tab.Screen
        name="Home"
        component={HomeNavigator}
        options={{ title: "Inicio" }}
      />
      <Tab.Screen
        name="Settings"
        component={SettingStackNavigator}
        options={{ title: "Ajustes" }}
      />
    </Tab.Navigator>

在设置激活器中：

const SettingStackNavigator = (props) => {
  return (
    <SettingStack.Navigator screenOptions={defaultNavOptions}>
      <SettingStack.Screen
        name="Settings"
        component={SettingScreen}
        options={settingsOptions}
      />
    </SettingStack.Navigator>
  );
};

最后在设置屏幕中：

import { SafeAreaView } from "react-native-safe-area-context";
    return (
      <SafeAreaView
        style={{
             flex: 1,
    backgroundColor: Colors.backgroundColor,
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        {colorScheme === "dark" && <StatusBar barStyle="light-content" />}
       // Other components
      </SafeAreaView>

---

如果你想改变这个小家伙的底色，你需要在你的标签上添加样式选项

 tabBarOptions={{
    style: {
      backgroundColor: Colors.tabBackgroundColor,
    },
  }}

---

如果你想改变这个小家伙的底色，你需要在你的标签上添加样式选项

 tabBarOptions={{
    style: {
      backgroundColor: Colors.tabBackgroundColor,
    },
  }}