试试这个

screenOptions={{
                        tabBarStyle: {
                            paddingBottom:0,         
                        },
                }}

1.请使用safeAreaView外部的选项卡栏，否则安全区域视图将计算缺口并将选项卡栏呈现在缺口上方。
2.如果您在安全区域视图中使用选项卡栏，请使用安全区域视图的force inset属性：<SafeAreaView forceInset = {bottom : 'never}这将使safeareaview与底部区域冲突，并且您的标签栏将正确呈现。通过使用这种方法，你必须在提供样式时要精确一些。

const App = () => {
  return (
    <SafeAreaView style={styles.droidSafeArea} forceInset = {bottom : 'never'}>
      <View style={{ backgroundColor: "red", flex: 1 }}>
        <TabNavigator key="MainTabNav" />
      </View>
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  droidSafeArea: {
    flex: 1,
    backgroundColor: "#2F3438",
  }
});

我遇到了完全相同的问题，我所做的是根本没有在标签栏周围使用SafeAreaView，而是简单地分配我希望白色区域作为标签栏背景色的颜色。
在您的示例中，这将是：

return (
    <View>
        <TabNavigator style={{ backgroundColor: "#2F3438" }} key="MainTabNav" />
    </View>
);

<NavigationContainer>
     <Tab.Navigator
         tabBarOptions={{
             activeTintColor: Colors.tabIconSelected,
             inactiveTintColor: Colors.tabIconDefault,
             style: styles.container
         }}/>
</NavigationContainer>

const styles = StyleSheet.create({
    container: {
        backgroundColor: Colors.darkBackgroundColor,
        borderTopWidth: 0
    }
});

Note : borderTopWidth: 0 worked for me

对于react原生导航V5

<Tab.Navigator
 tabBarOptions={{
  style: {
   borderTopWidth: 0
}
}}
>
   <Tab.Screen/>
<Tab.Navigator>

注：此为底部选项卡

当我在this post之后的bottomTabNavigation上实现浮动按钮时，我遇到了类似的问题，即tabBar有带阴影的白色（我在组件样式中使用了阴影）。
我使用了React导航v6。
issue image1，issue image2（抱歉，这是我发布的第一个答案，我还不能嵌入图像）
我试着用borderWidth: 0删除它，但没有工作。
我的情况下，下面是为我工作.
试试这个

borderRadius: 25  // some much number that near tabbar height

在

<Tab.Navigator
  tabBar={(props) => (
    <View style={styles.navigatorContainer}>
      <BottomTabBar {...props} />
      {isIphoneX() && (
        <View
          style={[
            styles.xFillLine,
            { backgroundColor: "#fff" },
          ]}
        />
      )}
    </View>
  )}
  screenOptions={{
    headerShown: false,
    tabBarShowLabel: false,
    tabBarStyle: { 
                   borderRadius: 25,                // add here
                   borderTopWidth: 0,
                   borderRadius: 25,
                   backgroundColor: "transparent",
                   elevation: 30,
    },
    tabBarItemStyle: { backgroundColor: "#fff" },
  }}
>
...

则结果图像为this。
我不明白为什么会成功，但我希望有人能成功。

当我在Tab.Screen中使用TabBarIcon属性时遇到了这个问题
选项卡为const Tab = createBottomTabNavigator()
不管我怎么用SafeAreaView都解决不了这个问题。
我解决这个问题的方法是不使用TabBarIcon属性，而是在更高级别的Tab.Navigator上为tabBar属性创建一个自定义组件，如react原生文档https://reactnavigation.org/docs/bottom-tab-navigator/中所述
当我创建自定义tabBar组件时，它完全按预期工作，没有使用SafeAreaView。

我在react-native-navigation版本6上也遇到了同样的问题。在我的例子中，额外的空间没有显示在我的模拟器上，而是显示在真实的的设备上。
我通过简单地将safeAreaInsets={{bottom:0}}作为prop添加到Tab.Navigator组件来修复此问题。

<Tab.Navigator
    safeAreaInsets={{bottom:0}}
  >
  // ...screens
  </Tab.Navigator>