feat(taro): 新增 getTopBarInfo, useTopBarInfo

src/taro/__snapshots__/getTopBarInfo.test.ts.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`getTopBarInfo 表现正常 1`] = `
+Object {
+  "menuButtonHeight": 32,
+  "menuButtonHorizontalMargin": 10,
+  "menuButtonVerticalMargin": 4,
+  "menuButtonWidth": 87,
+  "navigationBarHeight": 40,
+  "statusBarHeight": 20,
+  "topBarHeight": 60,
+}
+`;

src/taro/getTopBarInfo.test.ts

@@ -0,0 +1,57 @@
+import * as Taro from '@tarojs/taro'
+
+describe('getTopBarInfo', () => {
+  const getMenuButtonBoundingClientRect: any = jest
+    .fn()
+    .mockImplementation(() => ({
+      width: 87,
+      height: 32,
+      left: 223,
+      top: 24,
+      right: 310,
+      bottom: 56,
+    }))
+  const getSystemInfoSync: any = jest.fn().mockImplementation(() => ({
+    model: 'iPhone 5',
+    pixelRatio: 2,
+    windowWidth: 320,
+    windowHeight: 520,
+    system: 'iOS 10.0.1',
+    language: 'zh_CN',
+    version: '7.0.4',
+    screenWidth: 320,
+    screenHeight: 568,
+    SDKVersion: '2.8.0',
+    brand: 'devtools',
+    fontSizeSetting: 16,
+    batteryLevel: 100,
+    statusBarHeight: 20,
+    safeArea: {
+      right: 320,
+      bottom: 568,
+      left: 0,
+      top: 20,
+      width: 320,
+      height: 548,
+    },
+    deviceOrientation: 'portrait',
+    platform: 'devtools',
+  }))
+
+  beforeAll(() => {
+    jest.mock(
+      '@tarojs/taro',
+      () =>
+        ({
+          getMenuButtonBoundingClientRect,
+          getSystemInfoSync,
+        } as typeof Taro),
+    )
+  })
+
+  test('表现正常', async () => {
+    const { getTopBarInfo } = await import('./getTopBarInfo')
+
+    expect(getTopBarInfo()).toMatchSnapshot()
+  })
+})

src/taro/getTopBarInfo.ts

@@ -0,0 +1,75 @@
+import {
+  getMenuButtonBoundingClientRect,
+  getSystemInfoSync,
+} from '@tarojs/taro'
+
+export interface GetTopBarInfoResult {
+  /**
+   * 状态栏高度。
+   */
+  statusBarHeight: number
+
+  /**
+   * 菜单按钮宽度。
+   */
+  menuButtonWidth: number
+
+  /**
+   * 菜单按钮高度。
+   */
+  menuButtonHeight: number
+
+  /**
+   * 菜单按钮垂直外边距。
+   */
+  menuButtonVerticalMargin: number
+
+  /**
+   * 菜单按钮水平外边距。
+   */
+  menuButtonHorizontalMargin: number
+
+  /**
+   * 导航栏高度。
+   */
+  navigationBarHeight: number
+
+  /**
+   * 顶栏高度。
+   */
+  topBarHeight: number
+}
+
+/**
+ * 获取顶栏信息。
+ *
+ * @returns 返回获取到的顶栏信息
+ */
+export function getTopBarInfo(): GetTopBarInfoResult {
+  const menuRect = getMenuButtonBoundingClientRect()
+  const sysInfo = getSystemInfoSync()
+
+  // 部分情况下 statusBarHeight 可能不存在或为 0，需手动计算，如：
+  // 苹果手机 iOS 版本 < 13 时下开启热点等
+  if (!sysInfo.statusBarHeight) {
+    sysInfo.statusBarHeight = sysInfo.screenHeight - sysInfo.windowHeight
+  }
+
+  const statusBarHeight = sysInfo.statusBarHeight
+  const menuButtonWidth = menuRect.width
+  const menuButtonHeight = menuRect.height
+  const menuButtonVerticalMargin = menuRect.top - statusBarHeight
+  const menuButtonHorizontalMargin = sysInfo.windowWidth - menuRect.right
+  const navigationBarHeight = menuButtonHeight + menuButtonVerticalMargin * 2
+  const topBarHeight = statusBarHeight + navigationBarHeight
+
+  return {
+    statusBarHeight,
+    menuButtonWidth,
+    menuButtonHeight,
+    menuButtonVerticalMargin,
+    menuButtonHorizontalMargin,
+    navigationBarHeight,
+    topBarHeight,
+  }
+}

src/taro/index.ts

@@ -5,7 +5,9 @@
  */
 
 // @index(['./**/*.ts', '!./**/*.test.*'], f => `export * from '${f.path}'`)
+export * from './getTopBarInfo'
 export * from './submit'
 export * from './useAutoStopPullDownRefresh'
 export * from './useSubmit'
+export * from './useTopBarInfo'
 // @endindex

src/taro/useTopBarInfo.ts

@@ -0,0 +1,6 @@
+import { getTopBarInfo, GetTopBarInfoResult } from './getTopBarInfo'
+import { useMemo } from 'react'
+
+export function useTopBarInfo(): GetTopBarInfoResult {
+  return useMemo(getTopBarInfo, [])
+}