react-native - React Native - 在 Material 顶部选项卡导航器中嵌套堆栈导航器时标题中的额外空间

Question

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

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

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

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: none 配置参数将其消失。

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