Rework the NavigationHeader

Reviewed By: dmmiller, ericvicenti Differential Revision: D3000972 fb-gh-sync-id: fcd4e63b72a70440e611289f03ed4757e230dc5b shipit-source-id: fcd4e63b72a70440e611289f03ed4757e230dc5b
jvassbo · Mar 2, 2016 · 8717b2d · 8717b2d
1 parent eb53194
commit 8717b2d
Show file tree

Hide file tree

Showing 22 changed files with 373 additions and 117 deletions.
diff --git a/Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js b/Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js
@@ -27,6 +27,7 @@ var {
   RootContainer: NavigationRootContainer,
   Reducer: NavigationReducer,
   Header: NavigationHeader,
+  HeaderTitle: NavigationHeaderTitle,
 } = NavigationExperimental;
 
 const NavigationBasicReducer = NavigationReducer.StackReducer({
@@ -60,12 +61,6 @@ class NavigationAnimatedExample extends React.Component {
       />
     );
   }
-  handleBackAction() {
-    return (
-      this.navRootContainer &&
-      this.navRootContainer.handleNavigation(NavigationRootContainer.getBackAction())
-    );
-  }
   _renderNavigated(navigationState, onNavigate) {
     if (!navigationState) {
       return null;
@@ -74,11 +69,13 @@ class NavigationAnimatedExample extends React.Component {
       <NavigationAnimatedView
         navigationState={navigationState}
         style={styles.animatedView}
-        renderOverlay={(props) => (
+        renderOverlay={(scenes, index, position, layout) => (
           <NavigationHeader
-            navigationState={props.navigationParentState}
-            position={props.position}
-            getTitle={state => state.key}
+            scenes={scenes}
+            index={index}
+            position={position}
+            layout={layout}
+            renderTitleComponent={pageState => <NavigationHeaderTitle>{pageState.key}</NavigationHeaderTitle>}
           />
         )}
         setTiming={(pos, navState) => {
@@ -121,7 +118,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   scrollView: {
-    marginTop: 64
+    marginTop: NavigationHeader.APPBAR_HEIGHT + NavigationHeader.STATUSBAR_HEIGHT,
   },
 });
 

diff --git a/Examples/UIExplorer/NavigationExperimental/NavigationBasicExample.js b/Examples/UIExplorer/NavigationExperimental/NavigationBasicExample.js
@@ -23,6 +23,7 @@ const NavigationExampleRow = require('./NavigationExampleRow');
 const {
   RootContainer: NavigationRootContainer,
   Reducer: NavigationReducer,
+  Header: NavigationHeader,
 } = NavigationExperimental;
 const StackReducer = NavigationReducer.StackReducer;
 
@@ -93,7 +94,7 @@ const styles = StyleSheet.create({
   topView: {
     backgroundColor: '#E9E9EF',
     flex: 1,
-    paddingTop: 30,
+    paddingTop: NavigationHeader.STATUSBAR_HEIGHT,
   },
 });
 

diff --git a/Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js b/Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js
@@ -28,6 +28,7 @@ const {
   Container: NavigationContainer,
   RootContainer: NavigationRootContainer,
   Header: NavigationHeader,
+  HeaderTitle: NavigationHeaderTitle,
   Reducer: NavigationReducer,
   View: NavigationView,
 } = NavigationExperimental;
@@ -154,13 +155,15 @@ class ExampleTabScreen extends React.Component {
       />
     );
   }
-  _renderHeader(props) {
+
+  _renderHeader(scenes, index, position, layout) {
     return (
       <NavigationHeader
-        navigationState={props.navigationParentState}
-        position={props.position}
-        layout={props.layout}
-        getTitle={state => stateTypeTitleMap(state)}
+        scenes={scenes}
+        index={index}
+        position={position}
+        layout={layout}
+        renderTitleComponent={pageState => <NavigationHeaderTitle>{stateTypeTitleMap(pageState)}</NavigationHeaderTitle>}
       />
     );
   }
@@ -270,7 +273,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   scrollView: {
-    marginTop: 64
+    marginTop: NavigationHeader.APPBAR_HEIGHT + NavigationHeader.STATUSBAR_HEIGHT,
   },
   tabContent: {
     flex: 1,

diff --git a/Examples/UIExplorer/NavigationExperimental/NavigationExampleRow.js b/Examples/UIExplorer/NavigationExperimental/NavigationExampleRow.js
@@ -16,7 +16,6 @@
 var React = require('react-native');
 var {
   Text,
-  PixelRatio,
   StyleSheet,
   View,
   TouchableHighlight,
@@ -50,7 +49,7 @@ const styles = StyleSheet.create({
   row: {
     padding: 15,
     backgroundColor: 'white',
-    borderBottomWidth: 1 / PixelRatio.get(),
+    borderBottomWidth: StyleSheet.hairlineWidth,
     borderBottomColor: '#CDCDCD',
   },
   rowText: {

diff --git a/Examples/UIExplorer/UIExplorerList.android.js b/Examples/UIExplorer/UIExplorerList.android.js
@@ -15,6 +15,8 @@
  */
 'use strict';
 
+const React = require('react');
+
 export type UIExplorerExample = {
   key: string;
   module: React.Component;