Created
September 12, 2018 08:05
-
-
Save Visionchen/ca44b60fdd6d288207c27f50fa7c95ca to your computer and use it in GitHub Desktop.
屏幕单位适配等
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ### 适配 | |
| ```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