自定义Taro的navBar 组件

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

下面是自定义的navBar 组件

1. 首先在index.config.ts 文件中 将navigationStyle设置‘custom’，这样头部自带的内容就不会存在 ，
2. 自定义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" />|| 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 (<Viewstyle={Object.assign({height: `${height}px`,paddingTop: `${paddingTop}px`,},style)}className={`${styles?.navBar} ${className}`}{...rest}><text className={styles.name}>****</text></View>);};export default memo(NavBar);