Refactor <NavigationHeader /> API.

Summary:- All the public sub component renderers should implement the interface
  NavigationSceneRenderer, which will help to reuse renderer or
  replace renders for different composition.

- Perf improvement. <NavigationHeader /> is rendering way more
  sub component than necessary, we shall fix that.

- No UI or behavior change.

Reviewed By: ericvicenti

Differential Revision: D3091442

fb-gh-sync-id: fba5f7ce74597fa6036b5b216c02b06052801983
shipit-source-id: fba5f7ce74597fa6036b5b216c02b06052801983

Examples/UIExplorer/UIExplorerApp.ios.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -77,10 +84,12 @@ class UIExplorerApp extends React.Component {
   _renderOverlay: Function;
   _renderScene: Function;
   _renderCard: Function;
+  _renderTitleComponent: Function;
   componentWillMount() {
     this._renderNavigation = this._renderNavigation.bind(this);
     this._renderOverlay = this._renderOverlay.bind(this);
     this._renderScene = this._renderScene.bind(this);
+    this._renderTitleComponent = this._renderTitleComponent.bind(this);
   }
   render() {
     return (
@@ -121,15 +130,20 @@ class UIExplorerApp extends React.Component {
   _renderOverlay(props: NavigationSceneRendererProps): ReactElement {
     return (
       <NavigationHeader
-        key={'header_' + props.scene.navigationState.key}
-        navigationProps={props}
-        renderTitleComponent={(navigationProps, scene) => {
-          return <NavigationHeader.Title>{UIExplorerStateTitleMap(scene.navigationState)}</NavigationHeader.Title>;
-        }}
+        {...props}
+        renderTitleComponent={this._renderTitleComponent}
       />
     );
   }
 
+  _renderTitleComponent(props: NavigationSceneRendererProps): ReactElement {
+    return (
+      <NavigationHeader.Title>
+        {UIExplorerStateTitleMap(props.scene.navigationState)}
+      </NavigationHeader.Title>
+    );
+  }
+
   _renderScene(props: NavigationSceneRendererProps): ?ReactElement {
     const state = props.scene.navigationState;
     if (state.key === 'AppList') {