自定义Taro的navBar 组件

由于业务特定,头部的内容会不大相同

下面是自定义的navBar 组件

  1. 首先在index.config.ts 文件中 将navigationStyle设置'custom',这样头部自带的内容就不会存在 ,
  2. 自定义navBar 这里自定义了一个计算不同设备头部胶囊的高度hook-useCustomNavBarParams
javascript 复制代码
import { useMemo } from 'react';
import Taro from '@tarojs/taro';

const useCustomNavBarParams = () => {
  const [height, paddingTop] = useMemo(() => {
    const sysInfo = Taro.getSystemInfoSync();
    const menuInfo = Taro.getMenuButtonBoundingClientRect();
    const navigationBarHeight =
      (menuInfo.top - (sysInfo?.statusBarHeight || 0)) * 2 + menuInfo.height;
    return [navigationBarHeight, sysInfo?.statusBarHeight];
  }, []);

  return [height, paddingTop];
};

export default useCustomNavBarParams;

navBar组件如下,在本组件就用到了自定的hook-useCustomNavBarParams

javascript 复制代码
import { FC, memo } from 'react';
import { StandardProps, View } from '@tarojs/components';

import useCustomNavBarParams from '@/hooks/useCustomNavBarParams';

import styles from './index.module.less';

const NavBar: FC<StandardProps> = ({ style = {}, className, ...rest }) => {
 
  const [height, paddingTop] = useCustomNavBarParams();

  return (
    <View
      style={Object.assign(
        {
          height: `${height}px`,
          paddingTop: `${paddingTop}px`,
        },
        style
      )}
      className={`${styles?.navBar} ${className}`}
      {...rest}
    >
      <text className={styles.name}>****</text>
      
    </View>
  );
};

export default memo(NavBar);
相关推荐
Yolanda_2022几秒前
vue-sync修饰符解析以及切换iframe页面进行保存提示功能的思路
前端·javascript·vue.js
Pu_Nine_92 分钟前
深入理解节流(Throttle):原理、实现与应用场景
javascript·性能优化·es6·节流·lodash 库
伍哥的传说3 分钟前
Vite Plugin PWA – 零配置构建现代渐进式Web应用
开发语言·前端·javascript·web app·pwa·service worker·workbox
ai产品老杨6 分钟前
解锁仓储智能调度、运输路径优化、数据实时追踪,全功能降本提效的智慧物流开源了
javascript·人工智能·开源·音视频·能源
GDAL6 分钟前
Quat.js四元数完全指南
javascript·quaternion
alphageek810 分钟前
Electron开源库入门教程:跨平台桌面应用框架
javascript·其他·electron·开源
小桥风满袖42 分钟前
极简三分钟ES6 - ES8中字符串扩展
前端·javascript
张拭心42 分钟前
这就是流量的力量吗?用豆包 AI 编程做的xhs小组件帖子爆了
前端·ai编程·豆包marscode
少年阿闯~~1 小时前
CSS3的新特性
前端·javascript·css3