在小程序中, 有的页面需求可能需要我们做一个自定义的导航栏, 今天就来踩一踩坑
首先需要在 App.JS 中给全局的导航栏隐藏,
- // App.JS
- Windows: {
- navigationStyle: 'custom',
- },
- // navigationStyle 接受两个参数 ['default', 'custom']: ['系统导航栏, 默认值', '隐藏系统导航栏']
这里隐藏掉默认的导航栏之后 可以通过自定义组件的形式, DIY 一个导航栏, 值得注意的是, 当隐藏系统导航栏后, 页面会直接顶到状态栏上, 不同机型的状高度可能不一致, 尤其是针对 苹果 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 style = {
- paddingTop: Taro.$navBarMarginTop + 'px'
- }
- // 将状态栏的区域空余出来
- return (
- <View className='navbarWrap' style={style}>
- <View className='navbar'> 自定义导航栏 </View>
- </View>
- );
- }
- }
- export default Navbar
- // 这里导航栏内容可以自行配置
然后就是在页面中使用 自定义导航栏
页面中使用方法有两种, 一种是常规的 import 组件, taro 中给我们提供了第二种方式
- // index/index.JS 首页
- 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
所幸的是方法二中同样支持 懒人路径写法, 具体工作中可自行选择自己喜欢的写法 这里就不做演示,
如果在开发中遇到了 jsEnginScriptError Component is not foundin path 类似的报错, 请首先确定自己路径的是否正确引用以及大小写是否有问题,
没问题的话 , 重新 yarn dev:weapp 即可
来源: https://www.cnblogs.com/vant850/p/10965043.html