TabNavigatorではヘッダが表示されない

React Navigationでは、ナビゲーションの種類にStackNavigatorとTabNavigatorがあります。StackNavigatorは関連性のある画面に遷移させる時（例えば、ブログなどの一覧画面から詳細画面への遷移）に使用されますが、TabNavigationは関連性のない画面間を遷移する（例えば、ホーム画面とプロファイル画面）の移動などに使用されます。

StackNavigatorの場合、デフォルトでHeaderが表示され、そこにタイトルをつけることができます。

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
  };

  /* render function, etc */
}

class DetailsScreen extends React.Component {
  static navigationOptions = {
    title: 'Details',
  };

  /* render function, etc */
}

const RootStack = StackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Details: {
      screen: DetailsScreen,
    },
  },
  {
    initialRouteName: 'Home',
  }
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

しかし、TabNavigatorは下にタブ表示がされますが、上と同様にnavigationOptionsでtitleを設定してもヘッダーが表示されません。

TabNavigationにヘッダとタイトルを表示する

TabNavigationにヘッダを表示する方法に、TabNavigationにStackNavigationをNestingする方法があります。上のRootStackを下のようにTabNavigatorにStackNavigatorがNestingされるようにすれば、Header/Titleを表示させることができます。

rootStack = TabNavigator(
  {
    Home: {
        screen: StackNavigator({
            Home: { screen: HomeScreen },
        })
    },
    Details: {
        screen: StackNavigator({
            Details: { screen: DetailsScreen },
        })
    },
  })