自定义Taro的navBar 组件

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

下面是自定义的navBar 组件

首先在index.config.ts 文件中将navigationStyle设置‘custom’，这样头部自带的内容就不会存在，
自定义navBar 这里自定义了一个计算不同设备头部胶囊的高度hook-useCustomNavBarParams

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


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);