taro 实现自定义 navbar

import React, { useState, useEffect } from 'react';
import { View } from '@tarojs/components';
import './index.less';

const NavBar: React.FC = props => {
    const [refresh, useRefresh] = useState(false);
    let systemInfo = wx.getSystemInfoSync();
    let rect = wx.getMenuButtonBoundingClientRect();
    let { statusBarHeight, platform } = systemInfo;
    let { top, height } = rect;
    let paddingBottom = platform == 'android' ? top : top - statusBarHeight;

    // 解决竖屏切横屏 navBar 高度不对问题
    useEffect(() => {
        setTimeout(() => {
            useRefresh(!refresh);
        }, 800);
    }, []);

    return (
        <View
            className="nav-bar"
            style={{
                height: height + 'px',
                paddingTop: top + 'px',
                paddingBottom: paddingBottom + 'px'
            }}
        >
            {props.children}
        </View>
    );
};
export default NavBar;