Merge pull request #1737 from didi/fix-components-name-conflict

fix: rn components name conflict
didi · Dec 13, 2024 · 817ecdb · 817ecdb
2 parents 0b3dd51 + 6c7f555
commit 817ecdb
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 21 deletions.
diff --git a/packages/webpack-plugin/lib/platform/json/wx/index.js b/packages/webpack-plugin/lib/platform/json/wx/index.js
@@ -156,7 +156,9 @@ module.exports = function getSpec ({ warn, error }) {
     },
     {
       test: 'usingComponents',
-      web: fixComponentName('usingComponents')
+      web: fixComponentName('usingComponents'),
+      ios: fixComponentName('usingComponents'),
+      android: fixComponentName('usingComponents')
     },
     {
       test: 'usingComponents',
@@ -256,12 +258,21 @@ module.exports = function getSpec ({ warn, error }) {
   }
 
   const spec = {
-    supportedModes: ['ali', 'swan', 'qq', 'tt', 'jd', 'qa', 'dd', 'web'],
-    normalizeTest,
-    page: [
-      ...windowRules,
-      ...componentRules
+    supportedModes: [
+      'ali',
+      'swan',
+      'qq',
+      'tt',
+      'jd',
+      'qa',
+      'dd',
+      'web',
+      'ios',
+      'android'
     ],
+
+    normalizeTest,
+    page: [...windowRules, ...componentRules],
     component: componentRules,
     window: windowRules,
     tabBar: {
@@ -297,7 +308,7 @@ module.exports = function getSpec ({ warn, error }) {
           ali (input) {
             const value = input.list
             delete input.list
-            input.items = value.map(item => {
+            input.items = value.map((item) => {
               return runRules(spec.tabBar.list, item, {
                 mode: 'ali',
                 normalizeTest,
@@ -361,7 +372,9 @@ module.exports = function getSpec ({ warn, error }) {
       },
       {
         test: 'usingComponents',
-        web: fixComponentName('usingComponents')
+        web: fixComponentName('usingComponents'),
+        ios: fixComponentName('usingComponents'),
+        android: fixComponentName('usingComponents')
       },
       {
         test: 'usingComponents',

diff --git a/packages/webpack-plugin/lib/platform/template/wx/component-config/fix-component-name.js b/packages/webpack-plugin/lib/platform/template/wx/component-config/fix-component-name.js
@@ -1,21 +1,24 @@
 const { isOriginTag, isBuildInTag } = require('../../../../utils/dom-tag-config')
 
 module.exports = function () {
+  const handleComponentTag = (el, data) => {
+    const newTag = `mpx-com-${el.tag}`
+    const usingComponents = data.usingComponents || []
+    // 当前组件名与原生tag或内建tag同名，对组件名进行转义
+    // json转义见：platform/json/wx/index.js fixComponentName
+    if (usingComponents.includes(newTag)) {
+      el.tag = newTag
+    }
+    return el
+  }
+
   return {
     waterfall: true,
     skipNormalize: true,
-    supportedModes: ['web'],
+    supportedModes: ['web', 'ios', 'android'],
     test: (input) => isOriginTag(input) || isBuildInTag(input),
-    // 输出web时对组件名进行转义避免与原生tag和内建tag冲突
-    web (el, data) {
-      const newTag = `mpx-com-${el.tag}`
-      const usingComponents = data.usingComponents || []
-      // 当前组件名与原生tag或内建tag同名，对组件名进行转义
-      // json转义见：platform/json/wx/index.js fixComponentName
-      if (usingComponents.includes(newTag)) {
-        el.tag = newTag
-      }
-      return el
-    }
+    web: handleComponentTag,
+    ios: handleComponentTag,
+    android: handleComponentTag
   }
 }
diff --git a/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js b/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js
@@ -82,8 +82,8 @@ module.exports = function getComponentConfigs ({ warn, error }) {
 
   // 转换规则只需以微信为基准配置微信和支付宝的差异部分，比如微信和支付宝都支持但是写法不一致，或者微信支持而支付宝不支持的部分(抛出错误或警告)
   return [
-    ...unsupported({ print }),
     fixComponentName({ print }),
+    ...unsupported({ print }),
     ad({ print }),
     view({ print }),
     scrollView({ print }),