自定义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);
相关推荐
无双_Joney3 小时前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥3 小时前
前端必学的 CSS Grid 布局体系
前端·css
EMT3 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
ccnocare3 小时前
选择文件夹路径
前端
艾小码3 小时前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月3 小时前
JavaScript作用域与作用域链详解
前端·面试
泉城老铁3 小时前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅3 小时前
JavaScript 作用域常见问题及解决方案
前端·javascript
司宸3 小时前
Prompt结构化输出:从入门到精通的系统指南
前端