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对比