React Native Tab Navigator：标签栏底部的空白区域

Question

我在我的 React Native 应用程序中使用react-navigation@4.0.10和react-native@0.63.5 ，当我使用createBottomTabNavigator时，iPhone 11 Pro 的标签标签下方有一个空隙。 它在 iPhone 12 上不一样。我的TabNavigatorOptions代码如下

const TabNavigatorOptions = {
    tabBarPosition: 'bottom',
    lazy: true,
    tabBarOptions: {
        activeTintColor: TabColors.activeColor,
        inactiveTintColor: TabColors.labelColor,
        bottomNavigationOptions: {
            labelColor: TabColors.labelColor,
            rippleColor: "white",
            shifting: false,
            activeLabelColor: TabColors.activeColor,
            backgroundColor: TabColors.backgroundColor
        },
        style: {
             height: 56, elevation: 8, position: 'absolute', left: 0, bottom: 0, right: 0
        }
    }
        
}

我试过将paddingBottom: 0添加到style object 中，但没有任何区别。

有谁知道我该怎么做？

更新：如果我在tabBarOptions -> style中添加红色背景，使用SafeAreaView我得到这个：

如果我删除SafeAreaView我会得到这个

Answer 1

我现在能找到的唯一解决方案是从 SafeAreaView 中删除底部插图。 我认为这不是一个好的解决方案，但至少它有效：

import * as React from "react";
import { SafeAreaView } from "react-navigation";

export default function App() {
    return (
      <SafeAreaView 
          style={{ flex: 1 }} 
          forceInset={{ top: "always", bottom: "never" }}
      >
          <AppNavigator />
      </SafeAreaView>
    )
}

如果您使用的是react-native-safe-area-context ：

import * as React from "react";
import { SafeAreaView } from 'react-native-safe-area-context';

export default function App() {
    return (
        <SafeAreaView 
            style={{ flex: 1 }} 
            edges={["right", "top", "left"]}
        >
            <AppNavigator />
        </SafeAreaView>
    );
}