1.5 NavigationBar

自己做项目中的重点知识，不是教程，如果学习的话可以拿来参考。源代码[地址][2]
[2]: https://github.com/BaiPeiHe/react-native

简介

顶部导航栏

iOS              - > UINavigation
Android          - > Toolbar
React Native     - > 自定义

NavigationBar基本组成

1. 左侧按钮 左侧区域
2. 右侧按钮 右侧区域
3. 标题 中间区域
4. 状态栏

具体实现

/**
 * Created by baihe on 2017/4/13.
 */

import React, { Component, PropTypes } from 'react';
import {
    View,
    Text,
    Image,
    StatusBar,
    Platform,
    StyleSheet,
} from 'react-native'

const NAV_BAR_HEIGHT_ANDROID = 50;
const NAV_BAR_HEIGHT_IOS = 44;
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:PropTypes.string,
        titleView:PropTypes.element,
        hide:PropTypes.bool,
        leftButton:PropTypes.element,
        rightButton:PropTypes.element,
        statusBar:PropTypes.shape(StatusBarShape),
    }
    // 属性的默认值
    static defaultProps={
        statusBar:{
            barStyle:'light-content',
            hide:false,
        }
    }
    constructor(props){
        super(props);
        this.state={
            title:'',
            hide:false
        }
    }

    render(){

        let status = 
            
        

        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:'gray'
    },
    navBar:{
        justifyContent:'space-between',
        alignItems:'center',
        height:Platform.OS === 'ios'? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID,
        flexDirection:'row',
    },
    titleViewContainer:{
        justifyContent:'center',
        alignItems:'center',
        // 绝对布局
        position:"absolute",
        left:40,
        right:40,
        top:0,
        bottom:0
    },

    title:{
        fontSize:20,
        color:'white'
    },

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

});