React Native - дополнительное пространство в заголовке при вложении стекового навигатора в Навигатор по вкладкам верхней части материала - PullRequest
1 голос
/ 03 июля 2019

В этом приложении я использую навигаторы, предоставленные 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?

area-in-question

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...