Skip to content

Instantly share code, notes, and snippets.

@Visionchen
Created September 12, 2018 08:05
Show Gist options
  • Select an option

  • Save Visionchen/ca44b60fdd6d288207c27f50fa7c95ca to your computer and use it in GitHub Desktop.

Select an option

Save Visionchen/ca44b60fdd6d288207c27f50fa7c95ca to your computer and use it in GitHub Desktop.
屏幕单位适配等
### 适配
```javascript
/**
* Created by vision on 2018/9/12.
*/
"use strict"
import {Dimensions, StatusBar, Platform, PixelRatio} from 'react-native'
//UI设计图的宽度
const designWidth = 750
//UI设计图的高度
const designHeight = 1334
//手机屏幕的宽度
export const width = Dimensions.get('window').width;
//手机屏幕的高度
export const height = Dimensions.get('window').height;
//计算手机屏幕宽度对应设计图宽度的单位宽度
export const unitWidth = width / designWidth
//计算手机屏幕高度对应设计图高度的单位高度
export const unitHeight = height / designHeight
export const statusBarHeight = getStatusBarHeight();
export const safeAreaViewHeight = isIphoneX() ? 34 : 0
//标题栏的高度
export const titleHeight = unitWidth * 100 + statusBarHeight;
//字体缩放比例,一般情况下不用考虑。
// 当应用中的字体需要根据手机设置中字体大小改变的话需要用到缩放比例
export const fontscale = PixelRatio.getFontScale()
/**
* 判断是否为iphoneX
* @returns {boolean}
*/
export function isIphoneX() {
const X_WIDTH = 375;
const X_HEIGHT = 812;
return Platform.OS == 'ios' && (height == X_HEIGHT && width == X_WIDTH)
}
//状态栏的高度
export function getStatusBarHeight() {
if (Platform.OS == 'android') return StatusBar.currentHeight;
if (isIphoneX()) {
return 44
}
return 20
}
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment