UU_RN_M/units/utils/common/NavigationBar.js

import React,{Component} from 'react'
import {ViewPropTypes,StyleSheet,Text,View,StatusBar,Platform,DeviceInfo} from 'react-native'
import {PropTypes}  from 'prop-types'

const NAV_BAR_HEIGHT_IOS = 44;
const NAV_BAR_HEIGHT_ANDROID = 50;
const STATUS_BAR_HEIGHT = DeviceInfo.isIPhoneX_deprecated ? 0:20;

const StatusBarShape = {//设置状态栏所接受的属性

    barStyle:PropTypes.oneOf(['light-content','default']),
    hidden:PropTypes.bool,
    backgroundColor:PropTypes.string,

};

export default  class NavigationBar extends Component{

    //提供属性的类型检查
    static propTypes = {

        style:ViewPropTypes.style,
        title:PropTypes.string,
        titleView:PropTypes.element,
        titleLayoutStyle:ViewPropTypes.style,
        hide:PropTypes.bool,
        statusBar:PropTypes.shape(StatusBarShape),
        leftButton:PropTypes.element,
        rightButton:PropTypes.element,

    };

    //设置默认属性
    static defaultProps = {

        statusBar:{

            barStyle:'light-content',
            hidden:false,

        },

    };


    render() {

        let statusBar = !this.props.statusBar.hidden ?
            (<View style={styles.statusBar_bar}>

                <StatusBar {...this.props.statusBar} />

            </View>):null;

        let titleView = this.props.titleView ?
            this.props.titleView:(<Text ellipsizeMode="head" numberOfLines={1} style={styles.statusBar_title}>{this.props.title}</Text>);


        let content = this.props.hide?null:
            (<View  style={styles.statusBar_navBar}>

                {this.getButtonElement(this.props.leftButton)}

                <View style={[styles.statusBar_navBarTitleContainer,this.props.titleLayoutStyle]}>

                    {titleView}

                </View>

                {this.getButtonElement(this.props.rightButton)}

            </View>);


        return (<View  style={[styles.container,this.props.style]}>

            {statusBar}
            {content}

        </View>)

    }


    getButtonElement(data){


        return (<View   style={styles.navBarButton}>

            {data ? data : null}

        </View>)


    }

}

const styles = StyleSheet.create({

    container:{

        backgroundColor:'#2196f3',

    },
    statusBar_bar:{

        height:Platform.OS==='ios'?STATUS_BAR_HEIGHT:0,

    },

    statusBar_title:{
        fontSize:18,
        color:'white',

    },

    statusBar_navBar:{

        flexDirection:'row',
        alignItems: 'center',
        justifyContent:'space-between',
        height:Platform.OS === 'ios'?NAV_BAR_HEIGHT_IOS:NAV_BAR_HEIGHT_ANDROID,

    },
    statusBar_navBarTitleContainer:{

        alignItems:'center',
        justifyContent: 'center',
        position:'absolute',
        left:40,
        right:40,
        top:0,
        bottom:0,


    },
    navBarButton:{

        alignItems:'center',

    },

});