微信小程序自定义Navbar（Taro可直接使用）

image.png

import React, { useState, useEffect } from "react";
import Taro, { useRouter, useDidShow } from "@tarojs/taro";
import { Input, View } from "@tarojs/components";
import { AtNavBar } from 'taro-ui'
import './index.scss'

function NavBar(porps) {
    // 获取系统信息
    const systemInfo = Taro.getSystemInfoSync();
    // 胶囊按钮位置信息
    const menuButtonInfo = Taro.getMenuButtonBoundingClientRect();
    // 导航栏高度 = 状态栏到胶囊的间距(胶囊距上距离-状态栏高度) * 2 + 胶囊高度 + 状态栏高度
    const [info, setInfo] = useState([0, 0, 0, 0, '#FFF', '#000'