react-native屏幕適配

寫一個屏幕適配類文件AdapterUtil.js，這樣避免每次進行單位換算

"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
}

 

使用方法 ，直接按照UI圖的 標注尺寸*unitWidth

import  React,{Component} from 'react'
import {
  View,
  StyleSheet,
  Text
} from 'react-native'
import {unitWidth, width}"../../utils/AdapterUtil";

export default class Demo extends Component {

  render() {
        const {backgroundColor, titleColor} = this.props
        return (
            <View style={styles.view}>
                    <View  style={styles.view2}>
            </View>
        )
  }

}

const styles= StyleSheet.create({
  view:{
      flex:1,
       alignItems: 'center', 
  },
  view2:{
      width:unitWidth*375,
      height:unitWidth*375,
      backgroundColor:'red'
  }
})