小程序总结（二十）-Taro框架下的自定义导航栏

自定义导航栏的样式居中问题， 该代码是基于Taro的，其他小程序要改成对应的组件即可。

具体显示的内容，根据具体需求增加组件即可。

先将你当前页面的导航模式设置为custom
navigationStyle: "custom"

为了方便大家复用（copy）, 直接上代码：

{/* 自定义导航栏 */}
        {/*html*/}
        <View className="nav-box">
          <View className='nav' style='height: {{status + navHeight}}px'>
            <View className='status' style={{'height': this.state.status + 'px'}}></View>
            <View className='navbar' style={{'height': this.state.navHeight + 'px'}}>
              {/* 返回按钮 */}
              <View className='back-icon'>
                <Image className="back-icon-img" src='https://kano.guahao.cn/Q05208685843'></Image>       
              </View>
              <View className='nav-title'>
                <Text>这是你的标题</Text>
              </View>
            </View>
          </View>
        </View>

componentDidMount () {
    this.setNavSize()
  }
  setNavSize () {
    let sysinfo = Taro.getSystemInfoSync()
    let statusHeight = sysinfo.statusBarHeight
    let isiOS = sysinfo.system.indexOf('iOS') > -1
    let navHeight
    if (!isiOS) {
      navHeight = 48;
    } else {
      navHeight = 44;
    }
    this.setState({
      status: statusHeight,
      navHeight: navHeight
    })
  }

.status {
  background: #018BF1;
}
.navbar{
  position: relative;
  background: #018BF1;
}
.back-icon{    
  width: 28px;    
  height: 100%;    
  position: absolute;    
  transform: translateY(-50%);    
  top: 50%;    
  display: flex;
}
.back-icon{
  width: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.back-icon-img{    
  width: 21px;    
  height: 30px;
}
.nav-title, .back-icon {
  font-size: 36px;
  color: #fff;
  font-weight: bold;
}
.nav-title{
  position: absolute;
  transform: translate(-50%, -50%);    
  left: 50%;    
  top: 50%;
  font-weight: bold;
}