自定义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);
相关推荐
chxii15 分钟前
10.4FormData :前端文件上传与表单数据处理的核心工具
前端
AntBlack41 分钟前
不当韭菜 : 好像真有点效果 ,想藏起来自己用了
前端·后端·python
楊无好1 小时前
react中props的使用
前端·react.js·前端框架
一个处女座的程序猿O(∩_∩)O1 小时前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js
一点一木1 小时前
火山方舟 Responses API 实战指南:从概念到「公司尽调 Dossier 生成器」
前端·人工智能·api
还是大剑师兰特1 小时前
TypeScript 面试题及详细答案 100题 (91-100)-- 工程实践与框架集成
前端·javascript·typescript·1024程序员节
可触的未来,发芽的智生2 小时前
触摸未来2025-10-25:蓝图绘制
javascript·python·神经网络·程序人生·自然语言处理
用户47949283569152 小时前
typeof null === 'object':JavaScript 最古老的 bug 为何 30 年无法修复?
前端·javascript·面试
__WanG2 小时前
如何编写标准StatefulWidget页面
前端·flutter
非凡ghost2 小时前
By Click Downloader(下载各种在线视频) 多语便携版
前端·javascript·后端