源码

/* * @Author: YooHoeh  * @Date: 2018-07-11 21:25:31  * @Last Modified by: YooHoeh * @Last Modified time: 2018-07-12 08:37:32 */import React, { Component, PropTypes } from "react";import { View, Text, StyleSheet, Platform, StatusBar, } from "react-native";import { platform } from "os";const NAV_BAR_HEIGHT_ANDROID = 50;const NAV_BAR_HEIGHT_IOS = 44;// ios状态栏高度const STATUS_BAR_HEIGHT = 20;const statusBarShape={  backgroundColor:PropTypes.string,  barStyle:PropTypes.oneOf('default','light-content','dark-content'),  hidden:PropTypes.bool,}  export default class NavigationBar extends Component {
      // 自定义组件并对其设置属性限定  static propTypes = {    style: View.propTypes.style,    title: PropTyoes.string,    titleView: PropTypes.element,    hide: PropTypes.bool,    leftButton: PropTypes.element,    rightButton: PropTypes.element,    statusBar:PropTypes.shap(statusBarShape)  };  // 组件默认设置  static defaultProps={    statusBar:{      barStyle:'light-content',      hidden:false,    }  }  // 构造函数，默认导航栏不隐藏  constructor(props) {    super(props);    this.state = {      title: "",      hide: false    };  }  render() {    // 状态栏    let status = 
          
         
    ;    // 判断标题是字符串还是一个view组件    let titleView = this.props.titleView ? (      this.props.titleView    ) : (      
    
     {
   this.props.title}
        );    let content = (      
    
             {
   this.props.leftButton}        
     
      {titleView}
             {
   this.props.rightButton}      
        );    return 
    
           {status}      {content}    
    ;  }}// 样式const styles = StyleSheet.create({  container: {    backgroundColor: "grey"  },  navBar: {    justifyContent: "space-between",    alignItem: "center",    height: Platform.OS === "ios" ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID,    flexDirection: "row"  },  titleViewContainer: {    justifyContent: "center",    alignItem: "center",    positon: "absolute",    left: 40,    right: 40,    top: 0,    bottom: 0  },  title: {    fontSize: 20,    color: "white"  },  statusBar: {    height: Platform.OS === "ios" ? STATUS_BAR_HEIGHT : 0  }});