在React Native开发中,尺寸的默认单位为dp(android设备下160dpi,dp与px为1:1),加上跨平台及各种设备的屏幕尺寸不同、分辨率不同,导致在不同设备下显示不一致的问题。所以我们需要在样式中做一些适配。
以下是一个简单封装的React Native 适配工具类,已添加d.ts文件,支持TypeScript引入。
适配前后对比
GETTING STARTED
1.安装
$ npm i react-native-scale-size --save
或者
$ yarn add react-native-scale-size
2.导入
import{
ScaleSize,
ScaleText
}from'react-native-scale-size';
EXAMPLE
conststyles = StyleSheet.create({
content: {
width: ScaleSize(100),
fontSize: ScaleText(18)
}
})
注意
ScaleText在Android设备下,会根据系统设置字体大小作调整,如不需要,可全面使用ScaleSize
如对您有帮助,请给个star,谢谢
网友评论
这里面就有一个适配函数,来找找 哈哈 ,我写的