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

packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js

@@ -13,8 +13,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
+
+    const styleObj = classMap[className]?.(formatValue)
+    if (!styleObj) {
+      dependentScreenSize = originalDependentScreenSize
+      return
+    }
+
+    // 使用不可枚举属性记录屏幕尺寸依赖，避免该内部标记被合并到 RN 样式中
+    Object.defineProperty(styleObj, '_dependentScreenSize', {
+      value: dependentScreenSize
+    })
+    dependentScreenSize = dependentScreenSize || originalDependentScreenSize
+
+    classMapValueCache.set(className, styleObj)
   }
   return classMapValueCache.get(className)
 }
@@ -80,11 +94,13 @@ const unit = {
 
 const empty = {}
 
+// 记录style是否依赖屏幕尺寸
+let dependentScreenSize = false
 const isNum = (v) => !isNaN(+v)
-
 function formatValue (value, unitType) {
   if (!dimensionsInfoInitialized) useDimensionsInfo(global.__mpxAppDimensionsInfo)
   if (unitType && typeof unit[unitType] === 'function') {
+    dependentScreenSize = true
     return unit[unitType](+value)
   }
   if (value === 'hairlineWidth') {
@@ -329,12 +345,12 @@ export default function styleHelperMixin () {
         let idTotal = -1
         if (__mpx_perf_framework__) idTotal = perf.scopeStart('getStyle:total')
 
+        // 重置依赖标记
+        dependentScreenSize = false
         const isNativeStaticStyle = staticStyle && isNativeStyle(staticStyle)
 
         const { mergeToLayer, mergeToLayerWithStyles, genResult } = createLayer(isNativeStaticStyle)
 
-        this.__getSizeCount()
-
         if (staticClass || dynamicClass) {
           let idClass = -1
           if (__mpx_perf_framework__) idClass = perf.scopeStart('getStyle:class')
@@ -346,21 +362,28 @@ export default function styleHelperMixin () {
             let localStyle, appStyle, unoStyle, unoVarStyle
             if (localStyle = this.__getClassStyle?.(className)) {
               mergeToLayer(localStyle._layer || 'normal', localStyle, getMediaStyle(localStyle._media))
+              // class style 计算可能触发缓存，需要单独在结果中记录是否依赖屏幕尺寸，不能直接使用全局变量。
+              this.__dependentScreenSize = this.__dependentScreenSize || localStyle._dependentScreenSize
             } else if (unoStyle = global.__getUnoStyle?.(className)) {
               mergeToLayer(unoStyle._layer || 'uno', unoStyle, getMediaStyle(unoStyle._media))
+              this.__dependentScreenSize = this.__dependentScreenSize || unoStyle._dependentScreenSize
               if (unoStyle.transform || unoStyle.filter) needAddUnoPreflight = true
             } else if (unoVarStyle = global.__getUnoVarStyle?.(className)) {
               mergeToLayer('important', unoVarStyle)
+              this.__dependentScreenSize = this.__dependentScreenSize || unoVarStyle._dependentScreenSize
             } else if (appStyle = global.__getAppClassStyle?.(className)) {
               mergeToLayer(appStyle._layer || 'app', appStyle, getMediaStyle(appStyle._media))
-            } else if (isObject(this.__props[className])) {
+              this.__dependentScreenSize = this.__dependentScreenSize || appStyle._dependentScreenSize
+            } else if (isObject(this.__mpxProxy.props[className])) {
               // externalClasses必定以对象形式传递下来
-              mergeToLayer('normal', this.__props[className])
+              mergeToLayer('normal', this.__mpxProxy.props[className])
             }
           })
 
           if (needAddUnoPreflight) {
-            mergeToLayer('preflight', global.__getAppClassStyle?.('__uno_preflight'))
+            const unoPreflightStyle = global.__getAppClassStyle?.('__uno_preflight')
+            mergeToLayer('preflight', unoPreflightStyle)
+            this.__dependentScreenSize = this.__dependentScreenSize || unoPreflightStyle._dependentScreenSize
           }
 
           if (__mpx_perf_framework__) perf.scopeEnd(idClass)
@@ -392,6 +415,12 @@ export default function styleHelperMixin () {
         const result = genResult()
 
         const isEmpty = isNativeStaticStyle ? !result.length : isEmptyObject(result)
+
+        // 仅在依赖屏幕尺寸时才触发__getSizeCount进行相应式关联，避免屏幕尺寸变化时不必要的性能损耗
+        this.__dependentScreenSize = this.__dependentScreenSize || dependentScreenSize
+        if (this.__dependentScreenSize) {
+          this.__getSizeCount()
+        }
         if (__mpx_perf_framework__) perf.scopeEnd(idTotal)
         return isEmpty ? empty : result
       }

packages/core/src/platform/patch/getDefaultOptions.ios.js

@@ -402,7 +402,7 @@ const triggerResizeEvent = (mpxProxy, sizeRef) => {
   }
 }
 
-function usePageEffect (mpxProxy, pageId) {
+function usePageEffect (mpxProxy, pageId, type) {
   const sizeRef = useRef(getSystemInfo())
 
   useEffect(() => {
@@ -419,7 +419,7 @@ function usePageEffect (mpxProxy, pageId) {
             triggerResizeEvent(mpxProxy, sizeRef)
 
             // 如果当前全局size与pagesize不一致，在show之后触发一次resize事件
-            if (newVal === 'show' && global.__mpxPageSizeCountMap[pageId] !== global.__mpxSizeCount) {
+            if (type === 'page' && newVal === 'show' && global.__mpxPageSizeCountMap[pageId] !== global.__mpxSizeCount) {
               // 刷新__mpxPageSizeCountMap, 每个页面仅会执行一次，直接驱动render刷新
               global.__mpxPageSizeCountMap[pageId] = global.__mpxSizeCount
             }
@@ -431,7 +431,9 @@ function usePageEffect (mpxProxy, pageId) {
     }
     return () => {
       unWatch && unWatch()
-      del(global.__mpxPageSizeCountMap, pageId)
+      if (type === 'page') {
+        del(global.__mpxPageSizeCountMap, pageId)
+      }
     }
   }, [])
 }
@@ -659,6 +661,11 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
     })
   }
   const validProps = Object.assign({}, rawOptions.props, rawOptions.properties)
+  if (global.__externalClasses && global.__externalClasses.length > 0) {
+    global.__externalClasses.forEach((name) => {
+      validProps[name] = null
+    })
+  }
   const { hasDescendantRelation, hasAncestorRelation } = checkRelation(rawOptions)
   if (rawOptions.methods) rawOptions.methods = wrapMethodsWithErrorHandling(rawOptions.methods)
   const defaultOptions = memo(forwardRef((props, ref) => {
@@ -719,7 +726,7 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
       }
     })
 
-    usePageEffect(proxy, pageId)
+    usePageEffect(proxy, pageId, type)
     useEffect(() => {
       proxy.mounted()
       return () => {

packages/webpack-plugin/lib/loader.js

@@ -38,7 +38,7 @@ module.exports = function (content) {
     return content
   }
   const { resourcePath, queryObj } = parseRequest(this.resource)
-
+  const externalClasses = mpx.externalClasses || []
   const packageRoot = queryObj.packageRoot || mpx.currentPackageRoot
   const packageName = packageRoot || 'main'
   const independent = queryObj.independent
@@ -180,6 +180,7 @@ module.exports = function (content) {
           componentGenerics,
           componentPlaceholder,
           autoScope,
+          externalClasses,
           callback
         })
       }

packages/webpack-plugin/lib/react/index.js

@@ -25,6 +25,7 @@ module.exports = function ({
   componentGenerics,
   componentPlaceholder,
   autoScope,
+  externalClasses,
   callback
 }) {
   if (ctorType === 'app' && !queryObj.isApp) {
@@ -97,7 +98,8 @@ module.exports = function ({
         wxsModuleMap: templateRes.wxsModuleMap,
         localComponentsMap: jsonRes.localComponentsMap,
         localPagesMap: jsonRes.localPagesMap,
-        rnConfig
+        rnConfig,
+        externalClasses
       }, callback)
     }
   ], (err, scriptRes) => {

packages/webpack-plugin/lib/react/processScript.js

@@ -15,7 +15,8 @@ module.exports = function (script, {
   localPagesMap,
   rnConfig,
   componentGenerics,
-  genericsInfo
+  genericsInfo,
+  externalClasses
 }, callback) {
   const { appInfo, i18n } = loaderContext.getMpx()
 
@@ -49,7 +50,7 @@ import { getComponent, getAsyncSuspense } from ${stringifyRequest(loaderContext,
       jsonConfig,
       rnConfig
     })
-    output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap, pagesMap, firstPage, hasApp })
+    output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap, pagesMap, firstPage, hasApp, externalClasses })
     output += getRequireScript({ ctorType, script, loaderContext })
     output += `export default global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
   } else {

packages/webpack-plugin/lib/react/script-helper.js

@@ -150,7 +150,8 @@ function buildGlobalParams ({
   firstPage,
   outputPath,
   genericsInfo,
-  hasApp
+  hasApp,
+  externalClasses
 }) {
   let content = ''
   if (ctorType === 'app') {
@@ -165,6 +166,7 @@ global.__style = ${JSON.stringify(jsonConfig.style || 'v1')}
 global.__mpxPageConfig = ${JSON.stringify(jsonConfig.window)}
 global.__appComponentsMap = ${shallowStringify(componentsMap)}
 global.__preloadRule = ${JSON.stringify(jsonConfig.preloadRule)}
+global.__externalClasses = ${JSON.stringify(externalClasses || [])}
 global.currentInject.pagesMap = ${shallowStringify(pagesMap)}
 global.currentInject.firstPage = ${JSON.stringify(firstPage)}\n`
   } else {