# HeaderNav(头部导航栏)

# 组件引入

• 导航依赖react-navigation

    import HeaderNav from "..."
  

# 组件功能

• 返回上一页或返回指定页面
• 文本样式修改
• 可设置右键

# Demo

• 当设置navigator属性的时候，会自动返回上一页；

    <HeaderNav
      navigator={this.props.navigator}
      title={"消息列表"}
    />
  

  
• 如果想要自定以返回，不需要设置navigator，只需设置onLeftPress即可；

    <HeaderNav
      title={"消息列表"}
      onLeftPress={()=>{
        //....跳转
      }}
    />
  

• 当文字过长了，会自动省略，可设置右边文字，并添加点击事件

    <HeaderNav
        title={"消息列表消息列表消息列表"}
        rightTitle={"分享"}
        onLeftPress={()=>{
          //....跳转
        }}
        onRightPress={()=>{
          //点击右边文字
        }}
      />
  

  

# props

Attribute	Description	Type	Accepted values	default
navigator	导航（react-navigation)
title	标题
rightTitle	右边标题	String
imgUrl	左边图标源，默认箭头
fontColor	字体颜色
style	组件样式
onLeftPress	左边点击事件
onRightPress	右边点击事件