@szmg-fe/tarco/useNavTop.ts

function library in Taro

import { useFinishRender } from '@szmg-fe/hooks/useEffect';
import { compose } from '@szmg-fe/funba/ramda';
import fork from '@szmg-fe/funba/fork';
import Taro from '@tarojs/taro';
import getSystemInfo from '@szmg-fe/tarco/getSystemInfo';
import { useState } from 'react';

/**
 * 
 * @returns 胶囊按钮与顶部的距离
 */
export default function useNavBarStatus() {
    const [navTop, setBackTop] = useState(26);
    const [navHeight, setHeight] = useState(32);

    useFinishRender(() => {
        const setBarConfig = res => {
            const rect = Taro.getMenuButtonBoundingClientRect();
    
            if (res) {
                // const statusBarHeight = res.statusBarHeight;  //导航栏高度
                // const navTop = rect.top; //胶囊按钮与顶部的距离
                // console.log('navTop', navTop)
                setBackTop(rect.top);
                setHeight(rect.height);
            }
        }
        const getStatusBarHeight = compose(fork(console.error, setBarConfig), getSystemInfo); 
        getStatusBarHeight();
    });
    
    return {
        navTop,
        navHeight
    };
}