React Native 适配工具类



  • 在React Native开发中,尺寸的默认单位为dp(android设备下160dpi,dp与px为1:1),加上跨平台及各种设备的屏幕尺寸不同、分辨率不同,导致在不同设备下显示不一致的问题。所以我们需要在样式中做一些适配。
    以下是一个简单封装的React Native 适配工具类,已添加d.ts文件,支持TypeScript引入。
    react-native-scale-size

    适配前后对比
    0_1533016729234_E372DAFB-70C9-4AD6-999E-43EFA0463CA6.png

    1_1533016729236_B57668D8-3232-457E-A95E-0C8C016050C2.png

    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

    const styles = StyleSheet.create({
      content: {
        width: ScaleSize(100),
        fontSize: ScaleText(18)
      }
    })
    

    注意

    ScaleText在Android设备下,会根据系统设置字体大小作调整,如不需要,可全面使用ScaleSize

    如对您有帮助,请给个star,谢谢