React-Navigation: unable to hide title with nested navigators

I am using official navigation reaction to handle my navigation. I have one main TabNavigator for all applications with two tabs (called HitchhikingMapNavigatorand SettingsNavigatorbelow), and each tab has invested StackNavigator:

const HitchhikingMapNavigator = StackNavigator({
  hitchhikingMap: { screen: HitchhikingMapViewContainer },
  spotDetails: { screen: SpotDetailsViewContainer }
}, {
  navigationOptions: {
    header: {
      visible: false
    }
  }
});

const SettingsNavigator = StackNavigator({
  // some other routes
});

export default AppNavigator = TabNavigator({
  hitchhikingMap: { screen: HitchhikingMapNavigator },
  settings: { screen: SettingsNavigator }
}, {
  navigationOptions: {
    header: {
      visible: false,
    },
 },
});

As you can see, I put the visibility of the headers in false everywhere, even in my view HitchhikingMapViewContainer:

class HitchhikingMapView extends React.Component {

  static navigationOptions = {
    title: 'Map',
    header: {
      visible: false,
    },
    //...other options
  }

Still, the title bar is still visible:

screenshot

If I do not insert navigators (i.e. if I put this code, skipping nested):

export default AppNavigator = TabNavigator({
  hitchhikingMap: { screen: HitchhikingMapViewContainer },
  settings: { screen: SettingsNavigator }
});

then the title will be correctly hidden.

So, the conclusion: I cannot make the title invisible when I have two nested navigators. Any ideas?

+6
5

, , .

, :

1- : headerMode: 'none' StackNavigator. StackNavigator

: headerMode: 'screen' StackNavigator header: { visible: false } navigationOptions , .

: https://reactnavigation.org/docs/navigators/stack

+10

v1.0.0-beta.9, ,

static navigationOptions = {
    header: null
}
+6

:

headerMode: 'none'
+2

, android 0.45

static navigationOptions = {
    header: null
}
0

, :

static navigationOptions = {
    header: null
 };
0

Source: https://habr.com/ru/post/1015192/


All Articles