写一个屏幕适配类文件AdapterUtil.js,这样避免每次进行单位换算

"use strict"

import {Dimensions, StatusBar, Platform, PixelRatio} from 'react-native'

//UI设计图的宽度
const designWidth =
//UI设计图的高度
const designHeight = //手机屏幕的宽度
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() ? :
//标题栏的高度
export const titleHeight = unitWidth * + statusBarHeight; //字体缩放比例,一般情况下不用考虑。
// 当应用中的字体需要根据手机设置中字体大小改变的话需要用到缩放比例
export const fontscale = PixelRatio.getFontScale() /**
* 判断是否为iphoneX
* @returns {boolean}
*/
export function isIphoneX() {
const X_WIDTH = ;
const X_HEIGHT = ;
return Platform.OS == 'ios' && (height == X_HEIGHT && width == X_WIDTH)
} //状态栏的高度
export function getStatusBarHeight() {
if (Platform.OS == 'android') return StatusBar.currentHeight;
if (isIphoneX()) {
return
}
return
}

使用方法 ,直接按照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:,
alignItems: 'center',
},
view2:{
width:unitWidth*,
height:unitWidth*,
backgroundColor:'red'
}
})

最新文章

  1. HDU 2242 考研路茫茫——空调教室 无向图缩环+树形DP
  2. NopCommerce 3.80框架研究(一) 数据访问与持久化
  3. AIR串口通信
  4. Web前端浏览器兼容初探
  5. 提示框的优化之自定义Toast组件之(二)Toast组件的业务逻辑实现
  6. POJ3264——Balanced Lineup(线段树)
  7. 转:SSH原理与运用(二):远程操作与端口转发
  8. mysqldump命令详解
  9. Linux下使用gcc编程初体验
  10. bus实现兄弟组件传值
  11. 学以致用二十三-----shell脚本里调用脚本
  12. 可以设置超时版的的fetch
  13. Kafka与常见消息队列的对比
  14. ZooKeeper Installation(Dev)
  15. JDesktopPane JInternalFrames
  16. VC++异常处理
  17. WPF Item拖拽 DragDrop
  18. c++11改进我们的程序之垃圾回收(一)
  19. Parse 使用- iOS 后台数据[转]
  20. Spring Boot+CXF搭建WebService

热门文章

  1. C++ for无限循环~
  2. 【Android】家庭记账本手机版开发报告七
  3. HDU - 6025 Coprime Sequence(前缀gcd+后缀gcd)
  4. 每天一点点之vue框架开发 - vue组件之间传值(父向子传值)
  5. Ubuntu 14.04 搭建 ftp
  6. jQuery文档加载事件
  7. EUI库 - 9 - 数据集合 - 数组集合
  8. JSTL与EL表达式(为空判断)
  9. spring boot集成mybatis(2) - 使用pagehelper实现分页
  10. c# 用户控件,usercontrol,自定义控件属性