Skip to content

monajs/rn-px2dp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

参考文章

About

rn 项目屏幕适配解决方案

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published