/**

 * 从 react-native 库导入 Dimensions 和 PixelRatio 模块。

 * Dimensions 用于获取设备屏幕的尺寸信息。

 * PixelRatio 用于处理像素比例相关的操作。

 */

import { Dimensions, PixelRatio } from 'react-native';

/**

 * 设计稿的基准宽度,可根据实际 UI 设计稿进行调整。

 */

const guidelineBaseWidth = 430;

/**

 * 设计稿的基准高度,可根据实际 UI 设计稿进行调整。

 */

const guidelineBaseHeight = 932;

/**

 * 从 Dimensions 模块获取当前设备屏幕的宽度和高度,并分别赋值给 SCREEN_WIDTH 和 SCREEN_HEIGHT。

 */

const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');

/**

 * 判断当前设备是否为平板,通过比较屏幕宽度是否大于等于 720 来确定。

 */

const isTablet = SCREEN_WIDTH >= 720;

/**

 * 横向缩放函数,用于计算元素在横向的缩放尺寸。

 * 若当前设备为平板,则直接返回原始尺寸,不进行缩放。

 * 否则,根据屏幕宽度与基准宽度的比例对尺寸进行缩放。

 *

 * @param size - 需要进行缩放的原始尺寸。

 * @returns 缩放后的尺寸。

 */

export const scale = (size: number) => {

  if (isTablet) {return size;}

  return (SCREEN_WIDTH / guidelineBaseWidth) * size;

};

/**

 * 纵向缩放函数,用于计算元素在纵向的缩放尺寸。

 * 若当前设备为平板,则直接返回原始尺寸,不进行缩放。

 * 否则,根据屏幕高度与基准高度的比例对尺寸进行缩放。

 *

 * @param size - 需要进行缩放的原始尺寸。

 * @returns 缩放后的尺寸。

 */

export const verticalScale = (size: number) => {

  if (isTablet) {return size;}

  return (SCREEN_HEIGHT / guidelineBaseHeight) * size;

};

/**

 * 缓和缩放函数,常用于字体、圆角、图标等元素的缩放。

 * 若当前设备为平板,则直接返回原始尺寸,不进行缩放。

 * 否则,先进行横向缩放,再结合原始尺寸和缩放比例计算缓和后的尺寸。

 *

 * @param size - 需要进行缩放的原始尺寸。

 * @param factor - 缓和因子,默认为 0.5。

 * @returns 缓和缩放后的尺寸。

 */

export const moderateScale = (size: number, factor = 1) => {

  if (isTablet) {return size;}

  return size + (scale(size) - size) * factor;

};

/**

 * 字体缩放函数,用于适配系统字体大小设置。

 * 若当前设备为平板,则直接返回原始字体尺寸,不进行缩放。

 * 否则,先进行缓和缩放,再将结果四舍五入为最接近的像素值。

 *

 * @param size - 需要进行缩放的原始字体尺寸。

 * @returns 缩放并处理后的字体尺寸。

 */

export const normalizeFont = (size: number) => {

  if (isTablet) return size;

  return Math.round(PixelRatio.roundToNearestPixel(scale(size)));

};

/**

 * 导出包含屏幕信息的对象,包含屏幕宽度、高度以及是否为平板的标识。

 */

export const SCREEN = {

  width: SCREEN_WIDTH,

  height: SCREEN_HEIGHT,

  isTablet,

};

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐