【react-native app 屏幕适配方案（按照设计稿像素大小写就行）】宝剑锋从磨砺出，梅花香自苦寒来。这篇文章主要讲述react-native app 屏幕适配方案（按照设计稿像素大小写就行）相关的知识，希望能为你提供帮助。
import React, { Component, PropTypes } from ‘react‘
import { Dimensions, PixelRatio, Platform, StatusBar, View } from ‘react-native‘let props = {}
export default class Resolution {
static get(useFixWidth = true) {
return useFixWidth
? {
...props.fw,
}
: {
...props.fh,
}
}static setDesignSize(dwidth = 750, dheight = 1336, dim = ‘window‘) {
let designSize = {
width: dwidth,
height: dheight,
}let navHeight = Platform.OS === ‘android‘ ? StatusBar.currentHeight : 0
let pxRatio = PixelRatio.get(dim)
let { width, height } = Dimensions.get(dim)
if (dim != ‘screen‘) height -= navHeight
let w = PixelRatio.getPixelSizeForLayoutSize(width)
let h = PixelRatio.getPixelSizeForLayoutSize(height)let fw_design_scale = designSize.width / w
fw_width = designSize.width
fw_height = h * fw_design_scale
fw_scale = 1 / pxRatio / fw_design_scalelet fh_design_scale = designSize.height / h
fh_width = w * fh_design_scale
fh_height = designSize.height
fh_scale = 1 / pxRatio / fh_design_scaleprops.fw = {
width: fw_width,
height: fw_height,
scale: fw_scale,
navHeight,
}
props.fh = {
width: fh_width,
height: fh_height,
scale: fh_scale,
navHeight,
}console.log(
‘winSize‘,
JSON.stringify({
width,
height,
})
)
console.log(
‘winPixelSize‘,
JSON.stringify({
width: w,
height: h,
})
)
console.log(‘pxRatio‘, pxRatio)
console.log(‘fixWidth‘, JSON.stringify(props.fw))
console.log(‘fixHeight‘, JSON.stringify(props.fh))
}static FixWidthView = (p) =>
{
let { width, height, scale, navHeight } = props.fw
return (
<
View
{...p}
style={[
p.style,
{
marginTop: navHeight,
width: width,
height: height,
transform: [
{
translateX: -width * 0.5,
},
{
translateY: -height * 0.5,
},
{
scale: scale,
},
{
translateX: width * 0.5,
},
{
translateY: height * 0.5,
},
],
},
]}
/>
)
}static FixHeightView = (p) =>
{
let { width, height, scale, navHeight } = props.fh
return (
<
View
{...p}
style={[
p.style,
{
marginTop: navHeight,
width: width,
height: height,
transform: [
{
translateX: -width * 0.5,
},
{
translateY: -height * 0.5,
},
{
scale: scale,
},
{
translateX: width * 0.5,
},
{
translateY: height * 0.5,
},
],
},
]}
/>
)
}
}
//init
Resolution.setDesignSize()
推荐阅读
- SpringBoot整合Mybatis进行单元测试mapper和xml路径不一致出现的诡异问题
- SSM整合-Spring里面applicationContext.xml文件能不能改成其他文件名（）
- 初探RT1061 flash remapping功能的使用
- LeetCode T202.Happy Number/寻找快乐数
- 18P 滑稽脸动态gif表情包大全_微信
- 川普与希拉里美国大选唱情歌表情包分享_微信
- 川普与希拉里表情包对决大全_微信
- 川普带字搞笑表情包大全_微信
- qq厘米秀京东扭蛋机怎样玩？