Taro 小程序自定义导航栏

在小程序中，有的页面需求可能需要我们做一个自定义的导航栏，今天就来踩一踩坑

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

1 // app.js
2 
3 window: {
4    navigationStyle: 'custom',
5 },
6 //  navigationStyle 接受两个参数 ['default', 'custom']: ['系统导航栏， 默认值', '隐藏系统导航栏']

这里隐藏掉默认的导航栏之后可以通过自定义组件的形式，DIY 一个导航栏，值得注意的是，当隐藏系统导航栏后，页面会直接顶到状态栏上，不同机型的状高度可能不一致，尤其是针对苹果X 的刘海屏等水滴屏，需要做适配，

解决方法： Taro.getSystemInfo 中有个属性叫做 statusBarHeight ，通过此方法即可获取手机状态栏的高度，也可以在未隐藏系统导航栏时通过 getSystemInfo 中的可视区域高度 screenHeight - 窗口高度 windowHeight - 状态栏高度 statusBarHeight 的差值结果得出系统导航栏的高度，这里我通过仅拿苹果手机的不同机型进行测试得出系统导航栏高度为 44px ，便直接把自定义导航的高度定为 44px （有兴趣的可以试试）

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

1 // app.js
2 
3 Taro.getSystemInfo({})
4   .then(res  => {
5      Taro.$navBarMarginTop =  res.statusBarHeight || 0
6   })
7 // 将状态栏高度挂载全局

这里的写法很多可以申明在 app.js 中，也可以放在 redux中等等 ,

接下来自定义导航栏 Navbar

 1 // src/components/Navbar/index
 2 
 3 import Taro from '@tarojs/taro'
 4 import { View } from '@tarojs/components'
 5 import './index.scss'
 6 class Navbar extends Taro.Component {
 7 
 8   render() {
 9     const style = {
10       paddingTop: Taro.$navBarMarginTop + 'px'
11     }
12     // 将状态栏的区域空余出来
13     return (
14       <View className='navbarWrap' style={style}>
15         <View className='navbar'>自定义导航栏</View>
16       </View>
17     );
18   }
19 }
20 export default Navbar
21 
22 // 这里导航栏内容可以自行配置

然后就是在页面中使用自定义导航栏

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

 1 // index/index.js  首页
 2 
 3 import NavBar from '../../components/Navbar/index'
 4 
 5 class Index extends Component {
 6   config = {
 7     navigationBarTitleText: '首页',
 8     usingComponents: {
 9       'navbar': '../../components/Navbar/index', // 书写第三方组件的相对路径
10     },
11   }
12     render () {
13     return (
14       <View className='index'>
15         <NavBar />
16         { /* 方法一 */  }
17         <navbar />
18         { /* 方法一二 */  }
19 
20       </View>
21     )
22   }
23 }
24 
25 export default Index

所幸的是方法二中同样支持懒人路径写法，具体工作中可自行选择自己喜欢的写法这里就不做演示，

如果在开发中遇到了 jsEnginScriptError Component is not found in path 类似的报错，请首先确定自己路径的是否正确引用以及大小写是否有问题，

没问题的话，重新 yarn dev:weapp 即可

Taro 小程序 自定义导航栏

猜你喜欢

Taro 小程序自定义导航栏