美文网首页React Native学习
React Native 适配工具类

React Native 适配工具类

作者: 白酒__ | 来源:发表于2018-07-31 14:09 被阅读5次

在React Native开发中,尺寸的默认单位为dp(android设备下160dpi,dp与px为1:1),加上跨平台及各种设备的屏幕尺寸不同、分辨率不同,导致在不同设备下显示不一致的问题。所以我们需要在样式中做一些适配。

以下是一个简单封装的React Native 适配工具类,已添加d.ts文件,支持TypeScript引入。

react-native-scale-size

适配前后对比

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,谢谢

相关文章

网友评论

  • 女神经柒月:我一行代码就实现了,
    女神经柒月:@白酒__ https://www.jianshu.com/p/9178a2cce189
    这里面就有一个适配函数,来找找 哈哈 ,我写的
    白酒__:代码贴出来呗,学习学习:blush:

本文标题:React Native 适配工具类

本文链接:https://www.haomeiwen.com/subject/bvfhvftx.html