title: How to hide header on a specific screen of a TabNavigator
body: <p>I have a Tab Navigator :</p>
  
  <pre class="lang-js prettyprint-override"><code>const TabNav = createBottomTabNavigator({
  Home: {
      screen: HomeScreen,
      navigationOptions: {
          title: 'Home',  
      },
  },
  OtherPage: {
      screen: OtherPage,
      navigationOptions: {
          title: 'NoHeader!',
      },
  },
  Profile: {
      screen: ProfileScreen,
      navigationOptions: {
          title: 'Profile',
      }
  },
  },
  {
      tabBarOptions: {
          activeTintColor: 'black',
          style: {
              backgroundColor: 'white'
          },
      }
  });
  
  TabNav.navigationOptions = {
  title: 'Header Title',
  headerRight: (
      &lt;TouchableOpacity
          onPress={() =&gt; NavigationService.navigate('Rules')}
      &gt;
          &lt;Icon style={{ paddingRight: 10 }} name="ios-document" &gt; &lt;/Icon&gt;
      &lt;/TouchableOpacity&gt;
  ),
  headerLeft: null,
  }
  export default TabNav;
  </code></pre>
  
  <p>I would like to hide the header in the OtherPage, but I need it in my Home and Profile page.</p>
  
  <p>I tried to set header:null in the navigationOptions, but It doesn't work.</p>
  
  <p>Is there a way to do this ? 
  Or maybe to specify like in a stack navigator headerMode:'screen' ?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I tried to add navigationOtions in each TabNavigator screen, and set it to null in my OtherPage like so : </p>
  
  <pre><code>const TabNav = createBottomTabNavigator({
  Home: {
      screen: HomeScreen,
      navigationOptions: {
          title: 'Home',
          tabBarIcon: ({ tintColor, focused }) =&gt; (
              &lt;Icon
                  name={focused ? 'ios-list' : 'ios-list-outline'}
                  size={35}
                  style={{ color: tintColor }}
              /&gt;
          ),
          headerRight: (
              &lt;TouchableOpacity
                  onPress={() =&gt; NavigationService.navigate('Rules')}
              &gt;
                  &lt;Icon style={{ paddingRight: 10 }} name="ios-document" &gt; &lt;/Icon&gt;
              &lt;/TouchableOpacity&gt;
          ),
          headerLeft: null,
      },
  },
  OtherPage: {
      screen: OtherPage,
      navigationOptions: {
          title: 'NoHeader!',
          tabBarIcon: ({ tintColor, focused }) =&gt; (
              &lt;Icon
                  name={focused ? 'ios-flash' : 'ios-flash-outline'}
                  size={35}
                  style={{ color: tintColor }}
              /&gt;
          ),
          header:null
      },
  },
  Profile: {
      screen: ProfileScreen,
      navigationOptions: {
          title: 'Profile',
          tabBarIcon: ({ tintColor, focused }) =&gt; (
              &lt;Icon
                  name={focused ? 'ios-person' : 'ios-person-outline'}
                  size={35}
                  style={{ color: tintColor }}
              /&gt;
          ),
          headerRight: (
              &lt;TouchableOpacity
                  onPress={() =&gt; NavigationService.navigate('Rules')}
              &gt;
                  &lt;Icon style={{ paddingRight: 10 }} name="ios-document" &gt; &lt;/Icon&gt;
              &lt;/TouchableOpacity&gt;
          ),
          headerLeft: null,
      }
  },
  </code></pre>
  
  <p>But it's also not working, when I do this i have a default header (no title, no button on right, ...) on every tabs (even my OtherPage). </p>