RN要进行字体缩放,每个手机不一样,小的手机型号会很大
/**
* 从 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,
};
更多推荐


所有评论(0)