导航

    论坛 - React Native中文社区

    • 登录
    • 搜索
    • 版块
    • 最新
    • 热门
    • 搜索
    1. 主页
    2. junhaotong
    J
    • 继续与 junhaotong 聊天
    • 开始与 junhaotong 的新会话
    • 举报资料
    • 资料
    • 关注
    • 粉丝
    • 屏蔽
    • 主题
    • 帖子
    • 最佳
    • 群组

    junhaotong

    @junhaotong

    0
    声望
    1
    帖子
    136
    资料浏览
    0
    粉丝
    0
    关注
    注册时间 最后登录

    junhaotong 关注

    junhaotong 发布的帖子

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

      发布在 分享
      J
      junhaotong