自定义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);
相关推荐
疯狂的沙粒11 分钟前
在uni-app中如何从Options API迁移到Composition API?
javascript·vue.js·uni-app
siwangqishiq215 分钟前
Vulkan Tutorial 教程翻译(四) 绘制三角形 2.2 呈现
前端
李三岁_foucsli16 分钟前
js中消息队列和事件循环到底是怎么个事,宏任务和微任务还存在吗?
前端·chrome
尽欢i17 分钟前
HTML5 拖放 API
前端·html
xiaominlaopodaren31 分钟前
Three.js 光影魔法:如何单独点亮你的3D模型
javascript
PasserbyX33 分钟前
一句话解释JS链式调用
前端·javascript
1024小神34 分钟前
tauri项目,如何在rust端读取电脑环境变量
前端·javascript
Nano39 分钟前
前端适配方案深度解析:从响应式到自适应设计
前端
古夕43 分钟前
如何将异步操作封装为Promise
前端·javascript
小小小小宇44 分钟前
前端定高和不定高虚拟列表
前端