React Native-在Material Top Tab Navigator中嵌套Stack Navigator时，标头中有多余空间

Question

在此应用程序中，我使用react-navigation提供的导航器，具有以下层次结构。

BottomTabNavigator
    |
    + StackNavigator
    |
    + MaterialTopTabNavigator (PageTopTabNav)
    |     |
    |     + StackNavigator (StackNavA)
    |     |
    |     + StackNavigator
    |     |
    |     + StackNavigator
    |
    + StackNavigator

在下面的屏幕截图中，用红色框住的区域是不可配置的，摆脱它的唯一方法是在我的header: null中设置StackNavigator。

const StackNavA = createStackNavigator({
  LandingA: { screen: ScreenLandingA },
  Details: { screen: ScreenDetails }
}, {
  defaultNavigationOptions: {
    header: null
  }
});

但是，我想显示导航栏，以便将后退按钮保持在适当的位置，以允许用户返回上一页。

此StackNavA的导出如下。

export default class ScreenA extends React.Component {
  static router = StackNavA.router;

  render() {
    return (
      <StackNavA navigation={this.props.navigation} />
    );
  }
}

MaterialTopTabNavigator正在使用另一个文件中的文件。

const PageTopTabNav = createMaterialTopTabNavigator({
  A: { screen: ScreenA },
  B: { screen: ScreenB },
  C: { screen: ScreenC }
}, {
  initialRouteName: "A",
  tabBarOptions: {
    activeTintColor: "white",
    inactiveTintColor: "#CCCCCC",
    labelStyle: {
      fontSize: 16,
      fontWeight: "bold"
    },
    indicatorStyle: {
      height: 0
    },
    style: {
      backgroundColor: "teal",
      borderBottomWidth: 0.5,
      borderBottomColor: "gray"
    }
  },
  backBehavior: "none"
});

PageTopTabNav由SafeAreaView组件包装，以防止与 iOS 设备中的状态栏重叠。

export default class BrowseScreen extends React.Component {
  static router = PageTopTabNav.router;

  render() {
    return (
      <SafeAreaView style={{ flex: 1, backgroundColor: "teal" }}>
        <PageTopTabNav navigation={this.props.navigation} />
      </SafeAreaView>
    );
  }
}

在导航栏保持在StackNavA的情况下，是否有可能摆脱红色方框所示的区域？

Answer 1

使用headerMode：无配置参数会将其消失。

export default StackNavigator({
    LoginScreen: { screen: Login.component }
}, {
    initialRouteName: 'LoginScreen',
    headerMode: 'none' <------------- This
})

Answer 2

tabBarOptions: {
 ...,
 safeAreaInset: { bottom: 'never', top: 'never' }  // <-- this is the solution
}

用于tan导航额外底部空间的ios问题