007-rn导航栏组件简单编写

1：需求解释

1、导航栏是十分常见的一个组件，所有和导航有关的组件都会看到它，但是有时候导航组件自带的导航栏不能满足自己的需求，这个时候就需要自己再写一个导航栏组件了

2:作为一个头部导航栏，对手机的状态栏适配就是一个必要的步骤了

//这个最好在全局存储在全局中，后面我直接用statusBarHeight来判断状态栏高度
import {DeviceInfo,StatusBar,Platform} from 'react-native';
const statusBarHeight = ()=> {
    //判断是不是IPhoneX
    if(DeviceInfo.isIPhoneX_deprecated){
        return 44;
    }else if (Platform.OS === 'android') {
    //Version小于21的安卓手机是没有刘海屏的
        if (Platform.Version < 21) return 0;
        return StatusBar.currentHeight;
    }else {
    //苹果除了IPhoneX其他的状态栏都只是20的高
        return 20;
    }
}

3：现在是详细的页面了

//从外面传进来的值
let {navBarTitleView,title,titleViewStyle,titleMsg,titleView,...props}=this.props;
//适配状态栏
let navBarView = {paddingTop:statusBarHeight,height:props.titleHeight+statusBarHeight};
//左边的按钮的一些属性
const leftProps = {
            view: props.leftView,
            icon: props.leftIcon,
            title: props.leftTitle,
            titleMsg: props.leftTitleMsg,
            iconView: props.leftIconView,
            onPress:props.leftPress,
            hide:props.hideLeft,
            area:'left',
            titleHeight:props.titleHeight
        };
//右边按钮的一些属性
const rightProps={
            view: props.rightView,
            icon: props.rightIcon,
            title: props.rightTitle,
            titleMsg: props.rightTitleMsg,
            iconView: props.rightIconView,
            onPress:props.rightPress,
            hide:props.hideRight,
            area:'right',
            titleHeight:props.titleHeight
        };
<View style={[styles.container, navBarView, navBarTitleView,]}>
    <BothSideView {...leftProps}/>
    <View style={[styles.titleView, titleViewStyle, {width:props.titleWidth,height:props.titleHeight}]}>
        {titleView ?(titleView) :(<Text numberOfLines={1} style={[styles.titleMsg,titleMsg]}>{title}</Text>)}
                </View>
    <BothSideView {...rightProps}/>
</View>

4：现在是左右两边的的按钮

const BothSideView=({view,icon,title,titleMsg,iconView,onPress,hide,area,titleHeight})=>{
    let positioning;
    //有些时候左右两个按钮的宽度不一致，导致导航栏布局出现问题，所以我是用绝对定位来控制这两个按钮
    if(area=='left'){
        positioning = {left:0}
    }else {
        positioning = {right:0}
    }
    let subView = null;
    //如果你有自己写的页面就是自己的，然后文字的优先级在图片上面
    if(view){
        subView = view ;
    }else if(title){
        subView = <Text style={[styles.titleMsg,titleMsg]}>{title}</Text>
    }else if(icon){
        subView = <Image
            source={icon}
            style={[styles.titleImg,iconView]}/>
    }
    //hide是用来控制左右按钮隐不隐藏
    if(!hide){
        return <TouchableOpacity
            onPress={()=>{
                onPress&&onPress()
            }}
            style={[styles.leftTitleView,positioning,{height:titleHeight}]}>
            {subView}
        </TouchableOpacity>
    }
    return null
};

5：这时候你就要控制从父页面传进来的参数属性和给参数默认值

import PropTypes from "prop-types";
//用来限度参数属性（可以改成自己习惯的命名）
static propTypes = {
        title: PropTypes.string,//主题
        hideLeft: PropTypes.bool,//左边是否显示
        leftPress: PropTypes.func,//左边的点击事件
        leftTitle: PropTypes.string,//左边的文字主题
        leftView: PropTypes.element,//左边自己写的view
        leftIcon: PropTypes.any,//左边的图片
        hideRight: PropTypes.bool,
        rightPress: PropTypes.func,
        rightView: PropTypes.element,
        rightIcon: PropTypes.any,
        rightTitle: PropTypes.string,
        navBarTitleView: PropTypes.object,//导航栏的样式
        titleView: PropTypes.element,//中间的主题的view样式
        leftTitleMsg: PropTypes.object,//左边文字样式
        leftIconView: PropTypes.object,//左边图片样式
        rightIconView: PropTypes.object,
        rightTitleMsg: PropTypes.object,
        titleWidth: PropTypes.number,//主题的宽度
        titleHeight:PropTypes.number//导航栏的高度
    };

    static defaultProps={
        title: '标题',
        hideLeft: false,
        leftIcon: ‘’,
        navBarTitleView:{},
        leftTitleMsg:{},
        leftIconView:{},
        rightIconView:{},
        rightTitleMsg:{},
        titleWidth:260,
        titleHeight:44,
        leftPress:{()=>{自己导航组件的返回栈的方法，方便自己}
    };

导航栏组件这就差不多了