v0.1.4 add the hidden and animated properties to the NavigationBar

README.md

@@ -86,8 +86,8 @@ The document is being written, please refer to the example source code.
 
 ## Overlay
 ![](https://github.com/rilyu/teaset/blob/master/screenshots/15-Overlay1.png?raw=true) ![](https://github.com/rilyu/teaset/blob/master/screenshots/15-Overlay2.png?raw=true)
-![](https://github.com/rilyu/teaset/blob/master/screenshots/15-Overlay3.png?raw=true) ![](https://github.com/rilyu/teaset/blob/master/screenshots/15-Overlay4.png?raw=true)
-![](https://github.com/rilyu/teaset/blob/master/screenshots/15-Overlay5.png?raw=true)
+![](https://github.com/rilyu/teaset/blob/master/screenshots/15-Overlay3.png?raw=true) ![](https://github.com/rilyu/teaset/blob/master/screenshots/15-Overlay6.png?raw=true)
+![](https://github.com/rilyu/teaset/blob/master/screenshots/15-Overlay4.png?raw=true) ![](https://github.com/rilyu/teaset/blob/master/screenshots/15-Overlay5.png?raw=true)
 
 ## Toast
 ![](https://github.com/rilyu/teaset/blob/master/screenshots/16-Toast1.png?raw=true) ![](https://github.com/rilyu/teaset/blob/master/screenshots/16-Toast2.png?raw=true)

components/NavigationBar/NavigationBar.js

@@ -3,7 +3,7 @@
 'use strict';
 
 import React, {Component, PropTypes} from 'react';
-import {StyleSheet, Platform, StatusBar, View, Text} from 'react-native';
+import {StyleSheet, Platform, StatusBar, View, Text, Animated} from 'react-native';
 
 import Theme from 'teaset/themes/Theme';
 import NavigationTitle from './NavigationTitle';
@@ -22,6 +22,8 @@ export default class NavigationBar extends Component {
     leftView: PropTypes.element,
     rightView: PropTypes.element,
     tintColor: PropTypes.string, //bar tint color, default tint color leftView and rightView
+    hidden: PropTypes.bool, //bar hidden
+    animated: PropTypes.bool, //hide or show bar with animation
     statusBarStyle: PropTypes.oneOf(['default', 'light-content']), //status bar style (iOS only)
     statusBarColor: PropTypes.string, //status bar color, default: style.backgroundColor
     statusBarHidden: PropTypes.bool, //status bar hidden
@@ -31,6 +33,8 @@ export default class NavigationBar extends Component {
   static defaultProps = {
     ...View.defaultProps,
     type: 'ios',
+    hidden: false,
+    animated: true,
     statusBarInsets: true,
   };
 
@@ -49,15 +53,23 @@ export default class NavigationBar extends Component {
     this.state = {
       leftViewWidth: 0,
       rightViewWidth: 0,
+      barTop: new Animated.Value(props.hidden ? -64 : 0),
+      barOpacity: new Animated.Value(props.hidden ? 0 : 1),
     };
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.hidden != this.props.hidden) {
+      this.checkBarHidden(nextProps.hidden, nextProps.animated);
+    }
+  }
+
   getChildContext() {
     return {tintColor: this.props.tintColor};
   }
 
   buildProps() {
-    let {style, type, title, titleStyle, tintColor, statusBarColor, statusBarStyle, statusBarInsets, ...others} = this.props;
+    let {style, type, title, titleStyle, tintColor, hidden, animated, statusBarColor, statusBarStyle, statusBarInsets, ...others} = this.props;
 
     //build style
     let justifyContent, titleTextAlign;
@@ -74,7 +86,6 @@ export default class NavigationBar extends Component {
     style = [{
       backgroundColor: Theme.navColor,
       position: 'absolute',
-      top: 0,
       left: 0,
       right: 0,
       height: statusBarInsets && Platform.OS === 'ios' ? 64 : 44,
@@ -86,7 +97,9 @@ export default class NavigationBar extends Component {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: justifyContent,
-    }].concat(style);
+    }].concat(style).concat({
+      top: this.state.barTop, //hidden or shown
+    });
 
     let fs = StyleSheet.flatten(style);
 
@@ -121,17 +134,46 @@ export default class NavigationBar extends Component {
       height: 44,
       paddingLeft: paddingLeft,
       paddingRight: paddingRight,
+      opacity: this.state.barOpacity,
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'center',
-    }
+    };
+
+    //build leftView and rightView style
+    let leftRightViewStyle = {opacity: this.state.barOpacity};
 
     //convert string title to NavigationBar.Title
     if (typeof title === 'string') {
       title = <this.constructor.Title style={{textAlign: titleTextAlign, color: Theme.navTitleColor}} text={title} />;
     }
 
-    this.props = {style, type, title, titleStyle, tintColor, titleViewStyle, statusBarColor, statusBarStyle, statusBarInsets, ...others};
+    this.props = {style, type, title, titleStyle, tintColor, titleViewStyle, leftRightViewStyle, hidden, animated, statusBarColor, statusBarStyle, statusBarInsets, ...others};
+  }
+
+  checkBarHidden(hidden, animated) {
+    let {barTop, barOpacity} = this.state;
+    let barTopValue = hidden ? -this.barHeight : 0;
+    let barOpacityValue = hidden ? 0 : 1;
+    if (barTop._value != barTopValue || barOpacity._value != barOpacityValue) {
+      if (animated) {
+        Animated.parallel([
+          Animated.spring(barTop, {toValue: barTopValue, friction: 9}),
+          Animated.spring(barOpacity, {toValue: barOpacityValue, friction: 9}),
+        ]).start();
+      } else {
+        barTop.setValue(barTopValue);
+        barOpacity.setValue(barOpacityValue);
+      }      
+    }
+  }
+
+  onLayout(e) {
+    if (e.nativeEvent.layout.height != this.barHeight) {
+      this.barHeight = e.nativeEvent.layout.height;
+      this.checkBarHidden(this.props.hidden, this.props.animated);
+    }
+    this.props.onLayout && this.props.onLayout(e);
   }
 
   onLeftViewLayout(e) {
@@ -149,17 +191,14 @@ export default class NavigationBar extends Component {
   render() {
     this.buildProps();
 
-    let {style, statusBarStyle, statusBarColor, statusBarHidden, title, titleViewStyle, leftView, rightView, ...others} = this.props;
-    if (statusBarHidden) return (
-      <StatusBar backgroundColor={statusBarColor} barStyle={statusBarStyle} animated={true} hidden={statusBarHidden} />
-    );
+    let {style, animated, statusBarStyle, statusBarColor, statusBarHidden, title, titleViewStyle, leftRightViewStyle, leftView, rightView, ...others} = this.props;
     return (
-      <View style={style} {...others}>
-        <StatusBar backgroundColor={statusBarColor} barStyle={statusBarStyle} animated={true} hidden={statusBarHidden} />
-        <View style={titleViewStyle}>{title}</View>
-        <View onLayout={(e) => this.onLeftViewLayout(e)}>{leftView}</View>
-        <View onLayout={(e) => this.onRightViewLayout(e)}>{rightView}</View>
-      </View>
+      <Animated.View style={style} {...others} onLayout={e => this.onLayout(e)}>
+        <StatusBar backgroundColor={statusBarColor} barStyle={statusBarStyle} animated={animated} hidden={statusBarHidden} />
+        <Animated.View style={titleViewStyle}>{title}</Animated.View>
+        <Animated.View style={leftRightViewStyle} onLayout={e => this.onLeftViewLayout(e)}>{leftView}</Animated.View>
+        <Animated.View style={leftRightViewStyle} onLayout={e => this.onRightViewLayout(e)}>{rightView}</Animated.View>
+      </Animated.View>
     );
   }
 }

components/NavigationPage/NavigationPage.js

@@ -16,25 +16,27 @@ export default class NavigationPage extends BasePage {
     ...BasePage.propTypes,
     title: PropTypes.string,
     showBackButton: PropTypes.bool,
+    navigationBarInsets: PropTypes.bool,
   };
 
   static defaultProps = {
     ...BasePage.defaultProps,
     scene: Navigator.SceneConfigs.PushFromRight,
     title: null,
     showBackButton: false,
+    navigationBarInsets: true,
   };
 
   buildProps() {
     super.buildProps();
 
-    let {...others} = this.props;
+    let {navigationBarInsets, ...others} = this.props;
     let pageContainerStyle = [{
       flex: 1,
       padding: 0,
-      marginTop: Platform.OS === 'ios' ? 64 : 44,
+      marginTop: navigationBarInsets ? (Platform.OS === 'ios' ? 64 : 44) : 0,
     }];
-    this.props = {pageContainerStyle, ...others};
+    this.props = {navigationBarInsets, pageContainerStyle, ...others};
   }
 
   renderNavigationTitle() {

components/Overlay/OverlayPullView.js

@@ -15,15 +15,15 @@ export default class OverlayPullView extends OverlayView {
     ...OverlayView.propTypes,
     side: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
     containerStyle: View.propTypes.style,
-    rootTransform: PropTypes.oneOfType(
+    rootTransform: PropTypes.oneOfType([
       PropTypes.oneOf(['none', 'translate', 'scale']),
       PropTypes.arrayOf(PropTypes.shape({
         translateX: PropTypes.number,
         translateY: PropTypes.number,
         scaleX: PropTypes.number,
         scaleY: PropTypes.number,
       })),
-    ),
+    ]),
   };
 
   static defaultProps = {

docs/cn/NavigationBar.md

@@ -11,6 +11,8 @@ NavigationBar 组件定义一个页面导航条, 用于页面顶部显示页面
 | leftView | element |  | 导航条左视图。
 | rightView | element |  | 导航条右视图。
 | tintColor | string |  | 导航条左、右视图文字与图像颜色, 默认值在 Theme 中设置。
+| hidden | bool | false | 是否隐藏导航条
+| animated | bool | true | 显示/隐藏导航条和状态栏时是否有动画效果
 | statusBarStyle | string | 'default' | 系统状态栏样式(iOS only)。<br/>- default: 默认, 黑色文字或图标。<br/>- light-content: 亮色调, 白色文字或图标。
 | statusBarColor | string |  | 导航条背景颜色, 默认值在 Theme 中设置。
 | statusBarHidden | bool | false | 是否隐藏系统状态栏, 为 true 时系统状态栏与导航条均不显示。

docs/cn/NavigationPage.md

@@ -7,6 +7,7 @@ NavigationPage 定义一个导航页面组件, 继承自 [BasePage](./BasePage.m
 | [BasePage props...](./BasePage.md) |  |  | NavigationPage 组件继承 BasePage 组件的全部属性。
 | title | string | null | 导航条标题。
 | showBackButton | bool | false | 是否显示返回按钮。
+| navigationBarInsets | bool | true | 是否为内容区域增加导航条占用空间。<br/>此属性默认为 true, 使得内容不被导航条遮挡, 如果页面内容实用 ScrollView 且需要自行控制 NavigationBar 导航条的显示/隐藏, 那么你需要将此属性设置为 false 并自行在 ScrollView 容器里增加导航条的占用空间, 这样可以在导航条隐藏后把顶部空间利用起来。
 | scene | object | Navigator.SceneConfigs.PushFromRight | 继承自 BasePage 并修改默认值。
 
 ## Methods