Skip to content

fix: 修复rpx在屏幕尺寸变化时未跟随变化 #2418

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mackwang112 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

fix: 修复rpx在屏幕尺寸变化时未跟随变化 #2418

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
37a76e0
fix: 修复组件销毁后导致rpx/vw/vh相应式单位失效
mackwang112 Mar 10, 2026
69ea9c1
feat: 输出RN 屏幕尺寸变化时仅刷新依赖rpx/vw/vh响应式单位的组件
mackwang112 Mar 10, 2026
97b32fc
fix: 修复输出RN externalClasses 变化时未触发组件render
mackwang112 Mar 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat: 输出RN 屏幕尺寸变化时仅刷新依赖rpx/vw/vh响应式单位的组件
  • Loading branch information
@mackwang112
mackwang112 committed Mar 10, 2026
commit 69ea9c180943ff690606fb430d1bb973782c7872
46 changes: 32 additions & 14 deletions packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,22 @@ global.__mpxPageSizeCountMap = reactive({})

global.__GCC = function (className, classMap, classMapValueCache) {
if (!classMapValueCache.has(className)) {
const styleObj = classMap[className]?.(global.__formatValue)
styleObj && classMapValueCache.set(className, styleObj)
const originalDependentScreenSize = dependentScreenSize
dependentScreenSize = false

let styleObj = classMap[className]?.(formatValue)
if (!styleObj) return
if (!styleObj._media?.length) {
styleObj = {
_default: styleObj
}
}

// 记录是否依赖屏幕尺寸，在屏幕尺寸变化时决定是否重新渲染对应组件
styleObj._dependentScreenSize = dependentScreenSize
dependentScreenSize = dependentScreenSize || originalDependentScreenSize

classMapValueCache.set(className, styleObj)
}
return classMapValueCache.get(className)
}
Expand Down Expand Up @@ -79,12 +93,15 @@ const unit = {

const empty = {}

// 记录style是否依赖屏幕尺寸
let dependentScreenSize = false
function formatValue (value, unitType) {
if (!dimensionsInfoInitialized) useDimensionsInfo(global.__mpxAppDimensionsInfo)
if (unitType === 'hairlineWidth') {
return StyleSheet.hairlineWidth
}
if (unitType && typeof unit[unitType] === 'function') {
dependentScreenSize = true
return unit[unitType](+value)
}
const matched = unitRegExp.exec(value)
Expand Down Expand Up @@ -254,11 +271,11 @@ export default function styleHelperMixin () {
return concat(staticClass, stringifyDynamicClass(dynamicClass))
},
__getStyle (staticClass, dynamicClass, staticStyle, dynamicStyle, hide) {
// 重置依赖标记
dependentScreenSize = false
const isNativeStaticStyle = staticStyle && isNativeStyle(staticStyle)
let result = isNativeStaticStyle ? [] : {}
const mergeResult = isNativeStaticStyle ? (...args) => result.push(...args) : (...args) => Object.assign(result, ...args)
// 使用一下 __getSizeCount 触发其 get
this.__getSizeCount()

if (staticClass || dynamicClass) {
// todo 当前为了复用小程序unocss产物，暂时进行mpEscape，等后续正式支持unocss后可不进行mpEscape
Expand All @@ -267,17 +284,12 @@ export default function styleHelperMixin () {
classString.split(/\s+/).forEach((className) => {
let localStyle, appStyle
if (localStyle = this.__getClassStyle?.(className)) {
if (localStyle._media?.length) {
mergeResult(localStyle._default, getMediaStyle(localStyle._media))
} else {
mergeResult(localStyle)
}
mergeResult(localStyle._default, getMediaStyle(localStyle._media))
// class style 计算可能触发缓存，需要单独在结果中记录是否依赖屏幕尺寸，不能直接使用全局变量。
this.__dependentScreenSize = this.__dependentScreenSize || localStyle._dependentScreenSize
} else if (appStyle = global.__getAppClassStyle?.(className)) {
if (appStyle._media?.length) {
mergeResult(appStyle._default, getMediaStyle(appStyle._media))
} else {
mergeResult(appStyle)
}
mergeResult(appStyle._default, getMediaStyle(appStyle._media))
this.__dependentScreenSize = this.__dependentScreenSize || appStyle._dependentScreenSize
} else if (isObject(this.__props[className])) {
// externalClasses必定以对象形式传递下来
mergeResult(this.__props[className])
Expand Down Expand Up @@ -319,6 +331,12 @@ export default function styleHelperMixin () {
})
}
const isEmpty = isNativeStaticStyle ? !result.length : isEmptyObject(result)

// 仅在依赖屏幕尺寸时才触发__getSizeCount进行相应式关联，避免屏幕尺寸变化时不必要的性能损耗
this.__dependentScreenSize = this.__dependentScreenSize || dependentScreenSize
if (this.__dependentScreenSize) {
this.__getSizeCount()
}
return isEmpty ? empty : result
}
}
Expand Down
⚡