react-native-size-matters 技术文档

react-native-size-matters 技术文档

react-native-size-matters A lightweight, zero-dependencies, React-Native utility belt for scaling the size of your apps UI across different sized devices. 项目地址: https://gitcode.com/gh_mirrors/re/react-native-size-matters

安装指南

使用 npm 安装

npm install --save react-native-size-matters

使用 yarn 安装

yarn add react-native-size-matters

项目使用说明

react-native-size-matters 是一个轻量级的、零依赖的 React Native 工具库，旨在帮助开发者在不同尺寸的设备上缩放应用的 UI 界面。通过使用该库提供的工具函数，开发者可以轻松地调整应用的布局，使其在各种屏幕尺寸上都能良好地显示。

主要功能

• 自动缩放：根据设备的屏幕宽度和高度自动缩放 UI 元素的大小。
• 灵活调整：支持线性缩放和非线性缩放，开发者可以根据需要选择合适的缩放方式。
• 简化开发：开发者只需在标准尺寸的设备上进行一次开发，然后使用该库的工具函数即可适配其他尺寸的设备。

项目 API 使用文档

缩放函数

1. scale(size: number)

• 功能：根据设备的屏幕宽度线性缩放传入的尺寸。
• 示例：

  import { scale } from 'react-native-size-matters';
  
  const width = scale(30);
  

2. verticalScale(size: number)

• 功能：根据设备的屏幕高度线性缩放传入的尺寸。
• 示例：

  import { verticalScale } from 'react-native-size-matters';
  
  const height = verticalScale(50);
  

3. moderateScale(size: number, factor?: number)

• 功能：根据传入的尺寸和可选的缩放因子进行非线性缩放。默认缩放因子为 0.5。
• 示例：

  import { moderateScale } from 'react-native-size-matters';
  
  const padding = moderateScale(5); // 默认缩放因子为 0.5
  const paddingWithFactor = moderateScale(5, 0.1); // 自定义缩放因子为 0.1
  

4. moderateVerticalScale(size: number, factor?: number)

• 功能：与 moderateScale 类似，但根据设备的屏幕高度进行缩放。
• 示例：

  import { moderateVerticalScale } from 'react-native-size-matters';
  
  const height = moderateVerticalScale(30); // 默认缩放因子为 0.5
  const heightWithFactor = moderateVerticalScale(30, 0.3); // 自定义缩放因子为 0.3
  

缩放函数的简写

所有缩放函数都可以通过简写形式导入：

import { s, vs, ms, mvs } from 'react-native-size-matters';

ScaledSheet

ScaledSheet 是一个类似于 StyleSheet 的工具，但它会自动应用缩放函数。

使用方法

import { ScaledSheet } from 'react-native-size-matters';

const styles = ScaledSheet.create({
    container: {
        width: '100@s', // 等同于 scale(100)
        height: '200@vs', // 等同于 verticalScale(200)
        padding: '2@msr', // 等同于 Math.round(moderateScale(2))
        margin: 5
    },
    row: {
        padding: '10@ms0.3', // 等同于 moderateScale(10, 0.3)
        width: '50@ms', // 等同于 moderateScale(50)
        height: '30@mvs0.3' // 等同于 moderateVerticalScale(30, 0.3)
    }
});

项目安装方式

通过 npm 安装

npm install --save react-native-size-matters

通过 yarn 安装

yarn add react-native-size-matters

通过以上步骤，您可以轻松地将 react-native-size-matters 集成到您的 React Native 项目中，并使用其提供的工具函数来优化应用在不同设备上的显示效果。

react-native-size-matters A lightweight, zero-dependencies, React-Native utility belt for scaling the size of your apps UI across different sized devices. 项目地址: https://gitcode.com/gh_mirrors/re/react-native-size-matters