# @monajs/rn-px2dp

> rn 项目屏幕适配解决方案

Latest version **1.5.0** (published 2019-05-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install @monajs/rn-px2dp
pnpm add @monajs/rn-px2dp
yarn add @monajs/rn-px2dp
bun add @monajs/rn-px2dp
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.0 |
| Published | 2019-05-23 |
| First published | 2019-04-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | yangxi |
| Maintainers | yangxi |
| Keywords | react-native, px2dp |

## Links

- npm: https://www.npmjs.com/package/@monajs/rn-px2dp
- Repository: https://github.com/monajs/rn-px2dp
- Homepage: https://github.com/monajs/rn-px2dp#readme
- Issues: https://github.com/monajs/rn-px2dp/issues
- npm.io page: https://npm.io/package/@monajs/rn-px2dp

## Recent versions

- 1.5.0 (latest) — 2019-05-23
- 1.4.0 — 2019-04-11
- 1.3.0 — 2019-04-11
- 1.2.0 — 2019-04-10
- 1.1.3 — 2019-04-10
- 1.1.2 — 2019-04-09
- 1.1.1 — 2019-04-09
- 1.1.0 — 2019-04-09
- 1.0.1 — 2019-04-08
- 1.0.0 — 2019-04-08

## README

# rn 项目屏幕适配解决方案

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

## 安装
```
$ npm i --save @monajs/rn-px2dp
```

## demo1

```js
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

```js
import Px2dp from '@monajs/rn-px2dp'

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

## demo3

```js
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`来进行赋能
```js
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](https://github.com/facebook/react-native-website/blob/master/website/versioned_docs/version-0.19/pixelratio.md)
* [px、dp、sp对比](https://stackoverflow.com/questions/2025282/what-is-the-difference-between-px-dip-dp-and-sp/2025541#2025541)

---
_Source: https://npm.io/package/@monajs/rn-px2dp · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._