Live Note

Remain optimistic

移动端适配 Layout.js 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import { Platform, Dimensions, StyleSheet } from "react-native"

import { getStatusBarHeight, getBottomSpace } from "../Util/IPhoneXHelper"

let { width: windowWidth, height: windowHeight } = Dimensions.get("window")

// 全面屏手机 window.height 不包含 statusBar.height 不是真实的屏幕高度
let { width: screenWidth, height: screenHeight } = Dimensions.get("screen")

// 适配横屏
if (windowWidth > windowHeight) {
  ;[windowWidth, windowHeight] = [windowHeight, windowWidth]
}
if (screenWidth > screenHeight) {
  ;[screenWidth, screenHeight] = [screenHeight, screenWidth]
}

//像素比例
const ratio_750 = windowWidth / 750
const ratio_1080 = windowWidth / 1080

/**
 * 布局工具
 */
export default class Layout {
  /**
   * 是否是Android平台
   */
  static isAndroid = Platform.OS === "android"
  /**
   * 边缘距离
   */
  static edgeSize = Layout.DP(32)
  /**
   * 分割线高度
   */
  static dividerHeight = StyleSheet.hairlineWidth
  /**
   * 标题字体大小
   */
  static titleSize = Layout.DP(28)
  /**
   * 值字体大小
   */
  static valueSize = Layout.DP(26)
  /**
   * 子标题字体大小
   */
  static subTitleSize = Layout.DP(24)
  /**
   * 底部安全距离
   */
  static bottomSaveSpace = getBottomSpace()
  /**
   * 状态栏高度
   */
  static statusBarHeight = getStatusBarHeight(true)
  /**
   * 导航栏高度
   */
  static navbarHeight = 44
  /**
   * 导航栏+状态栏高度
   */
  static totalNavHeight = 44 + getStatusBarHeight(true)
  /**
   * 窗口宽度
   */
  static windowWidth = windowWidth
  /**
   * 窗口高度
   */
  static windowHeight = windowHeight
  /**
   * 屏幕宽度
   */
  static screenWidth = screenWidth
  /**
   * 屏幕高度
   */
  static screenHeight = screenHeight
  /**
   * px像素转换成react-native用的dp
   * @param {*} num 像素
   * @param {*} ratio 像素比例，默认750
   */ static DP(num, ratio = null) {
    let _ratio = ratio_750

    if (ratio) {
      _ratio = ratio
    }

    if (num === 1) {
      return StyleSheet.hairlineWidth
    }

    if (num === 0) {
      return 0
    }
    return num * _ratio
  }
  /**
   * px像素转换成react-native用的dp，1080比例
   * @param {*} num 像素
   */
  static DP3(num) {
    return Layout.DP(num, ratio_1080)
  }
}