解决什么痛点:
痛点:我们在编写 RN 引用时,通常会使用 750 设计稿;而 RN 默认单位是 px,因此我们需要频繁的转换
本工具的目的即解决设计稿转换问题
开始使用
已支持 Typescript
create 方法将实现自动转换 (无需额外配置)
初始化之后,任意 create 里的尺寸数据,自动按照 750 设计稿算
使用 rn-pxtrans 里的 create 替代原有的 StyleSheet.create
内联样式需手动加入
非 create 创建的样式,比如直接在 jsx 直接写的 style,还是需要转换
import { styleTrans } from 'rn-pxtrans'
const Home = () => <View style={styleTrans({ height: 100, width: 100 })}>...</View>
在内联样式中,也可以只对某个值进行转化,如
import { pxTrans } from 'rn-pxtrans'
const Home = () => <View style={{ height: pxTrans(100), width: 100 }}>...</View>
如何排除不转换的尺寸
在有些时候,整体需要转换,但个别的属性我们希望使用原始的 px,此时,只需用 noTrans 包裹个别的尺寸即可
import { noTrans, create } from 'rn-pxtrans'
create({
height: 100,
width: 100,
borderRadius: noTrans(2) // 依旧保留 2px
})
同样,在内联里,类似使用
import { styleTrans, noTrans } from 'rn-pxtrans'
const Home = () => (
<View style={styleTrans({ height: 100, width: 100, borderRadius: noTrans(2) })}>...</View>
)