flossom-miniapp/src/components/navbar/navbar.tsx

import { Component } from "react";
import classnames from "classnames";
import Taro from "@tarojs/taro";

import { Block, View, Image } from "@tarojs/components";
import { back } from "@/utils/traoAPI";

import "./navbar.less";

export default class Navbar extends Component<any, any> {
  constructor(props) {
    super(props);

    this.state = {
      name: "导航组件",
      statusBarHeight: 40, // 状态栏高度
      navigationBarHeight: 0, // 导航栏高度
      navHeight: 40,
    };
    this.initData();
  }

  async onLoad() {
    //   // 状态栏高度
  }
  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  async initData() {
    this.setStatusBar();
  }

  back = () => {
    back();
  };

  setStatusBar() {
    Taro.getSystemInfoAsync({
      success: (res) => {
        const statusBarHeight = res.statusBarHeight || 0;
        // 获取微信胶囊的位置信息 width,height,top,right,left,bottom
        const custom = Taro.getMenuButtonBoundingClientRect();
        // 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
        const navigationBarHeight =
          custom.height + (custom.top - statusBarHeight) * 2;
        // 总体高度 = 状态栏高度 + 导航栏高度
        const navHeight = navigationBarHeight + statusBarHeight;

        this.setState({
          statusBarHeight,
          navigationBarHeight,
          navHeight,
        });
      },
    });
  }

  render() {
    let { isBack, leftSlot, titleSlot, transparent, isWhite } = this.props;
    let { statusBarHeight, navigationBarHeight, navHeight } = this.state;
    const statusBarHeightRpx = statusBarHeight * 2;
    const navigationBarHeightRpx = navigationBarHeight * 2;
    const navHeightRpx = navHeight * 2;
    return (
      <Block>
        <View
          className="nav_box"
          style={{
            height: navigationBarHeightRpx + "rpx",
            lineHeight: navigationBarHeightRpx + "rpx",
            paddingTop: statusBarHeightRpx + "rpx",
            background: transparent ? "transparent" : "#fff",
          }}
        >
          <View className="back">
            {isBack && (
              <View
                // className="at-icon at-icon-chevron-left"
                className="back-btn"
                onClick={this.back}
              >
                <Image
                  className="back-img"
                  src={require("../../img/left.png")}
                  mode="widthFix"
                />
              </View>
            )}
            {leftSlot}
          </View>
          <View
            className={classnames("logo", {
              "logo-title": titleSlot,
            })}
          >
            {titleSlot ? (
              titleSlot
            ) : isWhite ? (
              <Image
                style="width: 238rpx;height:29rpx"
                src={require("../../img/logo/logo-w.png")}
                mode="widthFix"
              />
            ) : (
              <Image
                style="width: 238rpx;height:29rpx"
                src={require("../../img/logo/logo-b.png")}
                mode="widthFix"
              />
            )}
          </View>
          <View className="back" />
        </View>
        <View
          className="nav_top_padding"
          style={{ paddingBottom: navHeightRpx + "rpx" }}
        />
      </Block>
    );
  }
}