diff --git a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js index d5ffa9c19a..0b3b075718 100644 --- a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js +++ b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js @@ -1,4 +1,4 @@ -import { isObject, isArray, dash2hump, cached, isEmptyObject } from '@mpxjs/utils' +import { isObject, isArray, dash2hump, cached, isEmptyObject, hasOwn } from '@mpxjs/utils' import { Dimensions, StyleSheet } from 'react-native' import Mpx from '../../index' @@ -176,6 +176,14 @@ function transformStyleObj (styleObj) { return transformed } +function isNativeStyle (style) { + return Array.isArray(style) || ( + typeof style === 'object' && + // Reanimated 的 animated style 通常会包含 viewDescriptors 或 _animations + (hasOwn(style, 'viewDescriptors') || hasOwn(style, '_animations')) + ) +} + export default function styleHelperMixin () { return { methods: { @@ -183,7 +191,10 @@ export default function styleHelperMixin () { return concat(staticClass, stringifyDynamicClass(dynamicClass)) }, __getStyle (staticClass, dynamicClass, staticStyle, dynamicStyle, hide) { - const result = {} + const isNativeStaticStyle = staticStyle && isNativeStyle(staticStyle) + let result = isNativeStaticStyle ? [] : {} + const mergeResult = isNativeStaticStyle ? (o) => result.push(o) : (o) => Object.assign(result, o) + const classMap = this.__getClassMap?.() || {} const appClassMap = global.__getAppClassMap?.() || {} @@ -192,24 +203,34 @@ export default function styleHelperMixin () { const classString = mpEscape(concat(staticClass, stringifyDynamicClass(dynamicClass))) classString.split(/\s+/).forEach((className) => { if (classMap[className]) { - Object.assign(result, classMap[className]) + mergeResult(classMap[className]) } else if (appClassMap[className]) { // todo 全局样式在每个页面和组件中生效,以支持全局原子类,后续支持样式模块复用后可考虑移除 - Object.assign(result, appClassMap[className]) + mergeResult(appClassMap[className]) } else if (isObject(this.__props[className])) { // externalClasses必定以对象形式传递下来 - Object.assign(result, this.__props[className]) + mergeResult(this.__props[className]) } }) } if (staticStyle || dynamicStyle) { - const styleObj = Object.assign({}, parseStyleText(staticStyle), normalizeDynamicStyle(dynamicStyle)) - Object.assign(result, transformStyleObj(styleObj)) + const styleObj = {} + if (isNativeStaticStyle) { + if (Array.isArray(staticStyle)) { + result = result.concat(staticStyle) + } else { + mergeResult(staticStyle) + } + } else { + Object.assign(styleObj, parseStyleText(staticStyle)) + } + Object.assign(styleObj, normalizeDynamicStyle(dynamicStyle)) + mergeResult(transformStyleObj(styleObj)) } if (hide) { - Object.assign(result, { + mergeResult({ // display: 'none' // RN下display:'none'容易引发未知异常问题,使用布局样式模拟 flex: 0, @@ -220,8 +241,8 @@ export default function styleHelperMixin () { overflow: 'hidden' }) } - - return isEmptyObject(result) ? empty : result + const isEmpty = isNativeStaticStyle ? result.length > 0 : isEmptyObject(result) + return isEmpty ? empty : result } } } diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js index e8a134c32c..095907f9ad 100644 --- a/packages/webpack-plugin/lib/template-compiler/compiler.js +++ b/packages/webpack-plugin/lib/template-compiler/compiler.js @@ -2737,8 +2737,8 @@ function processElement (el, root, options, meta) { processIf(el) processFor(el) processRefReact(el, meta) + processStyleReact(el, options) if (!pass) { - processStyleReact(el, options) processEventReact(el, options) processComponentGenerics(el, meta) processComponentIs(el, options)