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