Rework the NavigationHeader

Summary:Add ability to specify custom left, right components, and title component. Style the `NavigationBar` according to the Platform.

Refer https://github.com/ericvicenti/navigation-rfc/pull/21

cc ericvicenti
Closes https://github.com/facebook/react-native/pull/5971

Differential Revision: D3080601

Pulled By: ericvicenti

fb-gh-sync-id: 7b921cd36b4c2ec1edf6f52629f1f9890d272dfd
shipit-source-id: 7b921cd36b4c2ec1edf6f52629f1f9890d272dfd

Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js

@@ -27,7 +27,6 @@ const {
 } = React;
 
 const {
-  AnimatedView: NavigationAnimatedView,
   CardStack: NavigationCardStack,
   Container: NavigationContainer,
   Header: NavigationHeader,
@@ -178,8 +177,10 @@ class ExampleTabScreen extends React.Component {
   _renderHeader(props: NavigationSceneRendererProps) {
     return (
       <NavigationHeader
-        {...props}
-        getTitle={state => stateTypeTitleMap(state)}
+        navigationProps={props}
+        renderTitleComponent={(navigationProps, scene) => {
+          return <NavigationHeader.Title>{stateTypeTitleMap(scene.navigationState)}</NavigationHeader.Title>;
+        }}
       />
     );
   }
@@ -284,7 +285,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   scrollView: {
-    marginTop: 64
+    marginTop: NavigationHeader.HEIGHT
   },
   tabContent: {
     flex: 1,