babel的样式单位处理插件,用于react-native开发者进行样式转换使用
ps.请注意必须在你要转换的文件头部加上px2dp的标识用于插件检测,否则无法进行转换!
'px2dp';
...
StyleSheet.create({
example: {
width: '20px',
}
})
↓ ↓ ↓ ↓ ↓ ↓
...
import { Dimensions } from 'react-native';
StyleSheet.create({
example: {
width: ds.get('window').width * 20 / 750, // 750是你设置的uiWidth的值
}
})
'px2dp';
...
import { Dimensions, xxx } from 'react-native';
StyleSheet.create({
example: {
width: '20px',
height: Dimensions.get('window').height,
}
})
↓ ↓ ↓ ↓ ↓ ↓
...
import { Dimensions, xxx } from 'react-native';
StyleSheet.create({
example: {
width: Dimensions.get('window').width * 20 / 750,
height: Dimensions.get('window').height,
}
})
'px2dp';
...
import { ds as Dimensions, xxx } from 'react-native';
StyleSheet.create({
example: {
width: '20px',
height: ds.get('window').height,
}
})
↓ ↓ ↓ ↓ ↓ ↓
...
import { ds as Dimensions, xxx } from 'react-native';
StyleSheet.create({
example: {
width: ds.get('window').width * 20 / 750,
height: ds.get('window').height,
}
})
'px2dp';
...
import { xxx } from 'react-native';
StyleSheet.create({
example: {
width: '20px',
}
})
↓ ↓ ↓ ↓ ↓ ↓
...
import { Dimensions, xxx } from 'react-native';
StyleSheet.create({
example: {
width: Dimensions.get('window').width * 20 / 750,
}
})
npm install babel-plugin-px2dp --save-dev
Via .babelrc
{
"plugins": [["px2dp", options]]
}
options
can be object.
{
"uiWidth": 750, // ui设计稿宽度
}