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

Author: Hedger Wang

Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js

@@ -58,10 +58,11 @@ const NavigationBasicReducer = NavigationReducer.StackReducer({
 
 class NavigationAnimatedExample extends React.Component {
   componentWillMount() {
-    this._renderNavigation = this._renderNavigation.bind(this);
     this._renderCard = this._renderCard.bind(this);
-    this._renderScene = this._renderScene.bind(this);
     this._renderHeader = this._renderHeader.bind(this);
+    this._renderNavigation = this._renderNavigation.bind(this);
+    this._renderScene = this._renderScene.bind(this);
+    this._renderTitleComponent = this._renderTitleComponent.bind(this);
   }
   render() {
     return (
@@ -99,14 +100,20 @@ class NavigationAnimatedExample extends React.Component {
   _renderHeader(/*NavigationSceneRendererProps*/ props) {
     return (
       <NavigationHeader
-        navigationProps={props}
-        renderTitleComponent={(navigationProps, scene) => {
-          return <NavigationHeader.Title>{scene.navigationState.key}</NavigationHeader.Title>;
-        }}
+        {...props}
+        renderTitleComponent={this._renderTitleComponent}
       />
     );
   }
 
+  _renderTitleComponent(/*NavigationSceneRendererProps*/ props) {
+    return (
+      <NavigationHeader.Title>
+        {props.scene.navigationState.key}
+      </NavigationHeader.Title>
+    );
+  }
+
   _renderCard(/*NavigationSceneRendererProps*/ props) {
     return (
       <NavigationCard

Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.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.
  *
@@ -139,7 +146,7 @@ const ExampleAppReducer = NavigationReducer.TabsReducer({
   ],
 });
 
-function stateTypeTitleMap(pageState) {
+function stateTypeTitleMap(pageState: any) {
   switch (pageState.type) {
     case 'ProfilePage':
       return 'Profile Page';
@@ -177,14 +184,20 @@ class ExampleTabScreen extends React.Component {
   _renderHeader(props: NavigationSceneRendererProps) {
     return (
       <NavigationHeader
-        navigationProps={props}
-        renderTitleComponent={(navigationProps, scene) => {
-          return <NavigationHeader.Title>{stateTypeTitleMap(scene.navigationState)}</NavigationHeader.Title>;
-        }}
+        {...props}
+        renderTitleComponent={this._renderTitleComponent}
       />
     );
   }
 
+  _renderTitleComponent(props: NavigationSceneRendererProps) {
+    return (
+      <NavigationHeader.Title>
+        {stateTypeTitleMap(props.scene.navigationState)}
+      </NavigationHeader.Title>
+    );
+  }
+
   _renderScene(props: NavigationSceneRendererProps) {
     const {onNavigate} = props;
     return (

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') {