1
import Taro from '@tarojs/taro'
2
import { useMemo } from 'react'
3

4
export default function useSystemInfo() {
5
  const menuInfo = Taro.getMenuButtonBoundingClientRect()
6
  const { systemInfo, navBarHeight, safeHeight, bottomSafeHeight, statusBarHeight, windowInfo } = useMemo(() => {
7
    // 获取的数值单位是px
8
    const windowInfo = wx.getWindowInfo(); // 用
9
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
10
    let statusBarHeight = windowInfo.statusBarHeight;
11
    let navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2;
12
    let safeHeight = windowInfo.safeArea.height;
13
    let bottomSafeHeight = windowInfo.screenHeight - windowInfo.safeArea.height - statusBarHeight;
14

15
    return {
16
      navBarHeight, safeHeight, bottomSafeHeight,
17
      statusBarHeight,
18
      systemInfo: Taro.getSystemInfoSync(), windowInfo
19
    }
20
  }, [])
21

22
  return {
23
    menuInfo,
24
    systemInfo, windowInfo,
25
    navBarHeight, safeHeight, bottomSafeHeight, statusBarHeight
26
  }
27
}

1
import useSystemInfo from '@/modules/common/hooks/useSystemInfo'
2
import { View } from '@tarojs/components'
3
import Taro from '@tarojs/taro'
4
import classNames from 'classnames'
5
import { ReactNode, useEffect, useState } from 'react'
6
import './index.scss'
7

8
export interface NavBarProps {
9
  title?: ReactNode
10
  left?: ReactNode
11
  onBackClick?: () => void
12
  fixed?: boolean
13
  placeholder?: boolean
14
  background?: string
15
}
16

17
export default function NavBar({
18
  background = '#fff',
19
  title,
20
  fixed = true,
21
  placeholder = true,
22
  left = <View className="sonic-icon sonic-icon-right-arrow"></View>,
23
  onBackClick = () => {
24
    Taro.navigateBack()
25
  },
26
}: NavBarProps) {
27
  const { navBarHeight, statusBarHeight } = useSystemInfo()
28
  const [useBackground, setUseBackground] = useState(false)
29
  useEffect(() => {
30
    if (!fixed || !placeholder || Number.isNaN(navBarHeight)) {
31
      return
32
    }
33
    const observe = Taro.createIntersectionObserver(this, {
34
      thresholds: [0],
35
      observeAll: false,
36
    })
37
    observe
38
      .relativeToViewport({
39
        top: 0,
40
      })
41
      .observe('.observe-view', (res) => {
42
        setUseBackground(res.intersectionRatio < 1)
43
      })
44
    return () => {
45
      observe.disconnect()
46
    }
47
  }, [fixed, placeholder, navBarHeight])
48
  return (
49
    <>
50
      <View
51
        style={{
52
          backgroundColor: background
53
            ? background
54
            : useBackground
55
              ? background
56
              : 'transparent',
57
        }}
58
        className={classNames('nav-bar-container', {
59
          'fixed-top': fixed,
60
        })}
61
      >
62
        <View style={{ height: statusBarHeight }}></View>
63
        <View
64
          className="nav-bar flex items-center cff fz36"
65
          style={{
66
            height: (navBarHeight),
67
          }}
68
        >
69
          {left && (
70
            <View onClick={onBackClick} className="nav-bar-back px-25 py-20">
71
              {left}
72
            </View>
73
          )}
74
          <View className="nav-bar-title text-overflow tx-c f36 c00 ">
75
            {title}
76
          </View>
77
        </View>
78
      </View>
79
      {placeholder && (
80
        <View className="placeholder">
81
          <View style={{ height: statusBarHeight }} />
82
          <View style={{ height: navBarHeight }} />
83
        </View>
84
      )}
85
      <View className="observe-view" style={{ height: 1 }}></View>
86
    </>
87
  )
88
}

1
.nav-bar-container {
2
  width: 100vw;
3
  transition: 0.5s background-color;
4
  .sonic-icon-right-arrow {
5
    transform: rotate(180deg);
6
  }
7

8
  &.fixed-top {
9
    position: fixed;
10
    left: 0;
11
    top: 0;
12
    right: 0;
13
    z-index: 100;
14
  }
15
}
16
.nav-bar-back {
17
  position: relative;
18
  z-index: 9;
19
  color: #000;
20
}
21

22
.nav-bar-title {
23
  position: absolute;
24
  width: 100%;
25
}