rn 项目屏幕适配解决方案

✨✨ 解决在不同屏幕尺寸下页面展示效果不统一的布局问题

安装

$ npm i --save @monajs/rn-px2dp

demo1

import px2dp from '@monajs/rn-px2dp'

const styles = StyleSheet.create(px2dp({
	container: {
        flex: 1,
        fontSize: 20,
        margin: 10,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
	welcome: {
		fontSize: 20,
		textAlign: 'center',
		margin: 10
	},
}, {
	uiWidthPx: 375,
	props: ['borderWidth']
}))

demo2

import Px2dp from '@monajs/rn-px2dp'

<Text style={{fontSize: px2dp._px2dp(20, 375)}}>@monajs/rn-px2dp</Text>

demo3

import px2dp from '@monajs/rn-px2dp'

const styles = StyleSheet.create(px2dp({
	container: {
        flex: 1,
        fontSize: px2dp._not(20),
        margin: 10,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    })

API

px2dp(styles, config)

参数	类型	默认值	描述
styles	Object		转换前的样式对象
[config]	Object		非必传
[config.uiWidthPx]	Number	750	设计稿总宽度
[config.props]	Array		需要自定义转换的样式属性

props: 默认会转换以下的样式属性，可以通过设置props来进行赋能

const _propList = [
	'width', 'height',
    'top', 'right', 'bottom', 'left',
    'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginVertical', 'marginHorizontal',
    'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingVertical', 'paddingHorizontal',
    'borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius',
    'shadowRadius',
    'fontSize'
]

px2dp._px2dp(uiElementPx, uiWidthPx)

描述: 对单个样式进行转换

参数	类型	默认值	描述
uiElementPx	Number		设计稿元素宽度
uiWidthPx	Number	750	设计稿总宽度

px2dp._not(uiElementPx)

描述: 对单个样式进行保护

参数	类型	默认值	描述
uiElementPx	Number		设计稿元素宽度

联系我

微信：yx12032331

参考文章

• pixelratio
• px、dp、sp对比