taro react 微信小程序 自定义公共头部

效果图

                                                                     默认头部样式

引入公共组件自定义样式

1.公共头部组件header.tsx

import { useEffect, useState } from "react";
import Taro from "@tarojs/taro";
import { View, Image } from "@tarojs/components";
import "./index.scss";

interface CustomerHeaderProps {
  /**
   * 非必填 左边节点
   * */
  backNode?: React.ReactNode | string;

  /**
   * 标题
   * */
  title?:React.ReactNode | string

  /**
   * 图标
   * */
  Icon?:string
}

const CustomerHeader: React.FC<CustomerHeaderProps> = (
  props: CustomerHeaderProps
) => {
  const globalData:any = {}
  const { backNode,title,Icon } = props;
  const backIcon: any = '返回icon地址'
  const [navbarHeight, setnavbarHeight] = useState<number>(0); // 顶部导航栏高度
  const [cusnavH, setcusnavH] = useState<number>(0);
  const [statusBarHeight, setstatusBarHeight] = useState<number>(0);
  // console.log(navbarBtn);
  useEffect(() => {
    globalData.systeminfo = Taro.getSystemInfoSync();
    console.log('globalData', globalData);
    if (!globalData.headerBtnPosi)
      globalData.headerBtnPosi = Taro.getMenuButtonBoundingClientRect();
    let newstatusBarHeight = globalData.systeminfo.statusBarHeight; // 状态栏高度
    let headerPosi = globalData.headerBtnPosi; // 胶囊位置信息
    let btnPosi = {
      // 胶囊实际位置，坐标信息不是左上角原点
      height: headerPosi.height,
      width: headerPosi.width,
      top: headerPosi.top - newstatusBarHeight, // 胶囊top - 状态栏高度
      bottom: headerPosi.bottom - headerPosi.height - newstatusBarHeight, // 胶囊bottom - 胶囊height - 状态栏height （胶囊实际bottom 为距离导航栏底部的长度）
      right: globalData.systeminfo.windowWidth - headerPosi.right // 这里不能获取 屏幕宽度，PC端打开小程序会有BUG，要获取窗口高度 - 胶囊right
    };

    const newcusnavH = btnPosi.height + btnPosi.top + btnPosi.bottom; // 导航高度
    const newnavbarHeight = headerPosi.bottom + btnPosi.bottom; // 胶囊bottom + 胶囊实际bottom
    setnavbarHeight(newnavbarHeight);
    setcusnavH(newcusnavH);
    setstatusBarHeight(newstatusBarHeight);
  }, []);

  const back = ()=>{
    Taro.navigateBack()
  }
  return (
    <View className='custom_nav'>
      <View className='custom_nav_box' style={{ height: `${navbarHeight}px` }}>
        <View
          className='custom_nav_bar'
          style={{
            top: `${statusBarHeight}px`,
            height: `${cusnavH}px`,
            lineHeight: `${cusnavH}px`
          }}
        >
          <View className='nav_warp'>
            {backNode ? backNode : <Image className='icon' src={Icon || backIcon} onClick={back} />}
            <View className='title'>{title || '默认值'}</View>
          </View>
        </View>
      </View>
    </View>
  );
};
export default CustomerHeader;

2.公共头部组件css

.custom_nav{
  width: 100%;
  background: #fff;
  position: relative;
  z-index: 99999;
  .custom_nav_box{
    position: fixed;
    width: 100%;
    background: #fff;
    z-index: 99999;
    border-bottom: 1px solid #ccc;
  }
  .custom_nav_bar {
    position: relative;
    z-index: 9;
  }
  .nav_warp{
    display: flex;
    align-items: center;
    position: relative;
    .icon{
      padding-left: 24px;
      width: 40px;
      height: 40px;
  }
  .title{
    flex: 0.9;
    font-size: 28px;

    text-align: center;
  }

  }

}

3.引入公共组件默认样式

import React, { useEffect } from "react";
import { View } from "@tarojs/components"
import CustomerHeader from '../../components/CustomerHeader'
import './index.scss'

interface Props {

}

const Chat: React.FC<Props> = () => {

    useEffect(() => {
     

    }, [])

    return (
        <>
            <CustomerHeader />
            <View className='controller'>
                
            </View>
        </>
    )
}
export default Chat

4.引入公共组件自定义样式

import React, { useEffect } from "react";
import { View, Image, Text } from "@tarojs/components"
import CustomerHeader from '../../components/CustomerHeader'
import './index.scss'

interface Props {

}

const Chat: React.FC<Props> = () => {
    const backIcon: any = '返回icon地址'
    const userList = [
        {
            id: 1,
            avatarImg:'地址'
        },
        {
            id: 2,
            avatarImg:'地址'
        },
        {
            id: 3,
            avatarImg:'地址'
        },
    ]
    useEffect(() => {
     

    }, [])

    const back = () => {
        console.log('自定义事件')
    }
    return (
        <>
            <CustomerHeader
              backNode={
                    <>
                        <Image className='icon' src={backIcon} onClick={back} />
                        <Text className='backText'>XXX</Text>
                    </>
                }
              title={
                    <View className='user_warp'>
                        {
                            userList?.map((item: any, index: number) => (
                                <View className='avatarImg_warp'
                                  style={{
                                        zIndex: userList.length - index
                                    }} key={item.id}
                                >
                                    <Image className='user_avatarImg' src={item.avatarImg} onClick={back} />
                                </View>
                            ))
                        }
                    </View>
                }

            />
            <View className='controller'>
                
            </View>
        </>
    )
}
export default Chat