Taro-自定义导航栏（小程序）

首先需要在app.js 中给全局的导航栏隐藏，

// app.js

window: {
   navigationStyle: 'custom',
},
//  navigationStyle 接受两个参数 ['default', 'custom']: ['系统导航栏， 默认值', '隐藏系统导航栏']

这里隐藏掉默认的导航栏之后可以通过自定义组件的形式，手写一个导航栏，

注意：当隐藏系统导航栏后，页面会直接顶到状态栏上，不同机型的状高度可能不一致，尤其是针对苹果X 的刘海屏等水滴屏，需要做适配，

解决方法： Taro.getSystemInfo 中有个属性叫做 statusBarHeight ，通过此方法即可获取手机状态栏的高度，

也可以在未隐藏系统导航栏时通过 getSystemInfo 中的可视区域高度 screenHeight - 窗口高度 windowHeight - 状态栏高度 statusBarHeight 的差值结果得出系统导航栏的高度，

这里我通过仅拿苹果手机的不同机型进行测试得出系统导航栏高度为 44px ，便直接把自定义导航的高度定为 44px （有兴趣的可以试试）

还有知道主要一点的是隐藏系统导航栏后右上角胶囊状的按钮还是后保留在原始位置的

// app.js

Taro.getSystemInfo({})
  .then(res  => {
     Taro.$navBarMarginTop =  res.statusBarHeight || 0
  })
// 将状态栏高度挂载全局（可以申明在 app.js 中， 也可以放在 redux中 等等）

自定义导航栏 Navbar

// src/components/Navbar/index

import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import './index.scss'
class Navbar extends Taro.Component {

  render() {
    const { TitleName } = this.props;
    const style = {
      paddingTop: Taro.$navBarMarginTop + 'px'
    }
    // 将状态栏的区域空余出来
    return (
      <View className='navbarWrap' style={style}>
        <View className='navbar'>{TitleName}</View>
      </View>
    );
  }
}
export default Navbar

// 导航栏内容可以自行配置

页面中使用方法有两种，一种是常规的import 组件， taro 中给我们提供了第二种方式

import NavBar from '../../components/Navbar/index'

class Index extends Component {
  config = {
    navigationBarTitleText: '首页',
    usingComponents: {
      'navbar': '../../components/Navbar/index', // 书写第三方组件的相对路径
    },
  }
    render () {
    return (
      <View className='index'>
        <NavBar />{ /* 方法一 */  }
        
        <navbar />{ /* 方法一二 */  }
        
      </View>
    )
  }
}

export default Index

//非必要，不要增加小程序代码量

Taro-自定义导航栏（小程序）

相关推荐