Merge pull request #2163 from didi/feat-nativecomponent-style

Feat RN原生组件标签支持使用class/style

Author: mackwang112

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,14 +176,25 @@ 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: {
       __getClass (staticClass, dynamicClass) {
         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
       }
     }
   }

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)