@mpxjs/webpack-plugin 2.9.64 → 2.9.65

package/lib/config.js

@@ -1,3 +1,5 @@
+const { dash2hump } = require('./utils/hump-dash')
+
 const reactConfig = {
   event: {
     parseEvent (attr) {
@@ -70,7 +72,11 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'bind') {
-        return prefix + eventName
+        if (eventName.includes('-')) {
+          return `${prefix}:${eventName}`
+        } else {
+          return prefix + eventName
+        }
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
@@ -132,9 +138,7 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'on') {
-        return prefix + eventName.replace(/^./, (matched) => {
-          return matched.toUpperCase()
-        })
+        return dash2hump(prefix + '-' + eventName)
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
@@ -192,7 +196,11 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'bind') {
-        return prefix + eventName
+        if (eventName.includes('-')) {
+          return `${prefix}:${eventName}`
+        } else {
+          return prefix + eventName
+        }
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
@@ -249,7 +257,11 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'bind') {
-        return prefix + eventName
+        if (eventName.includes('-')) {
+          return `${prefix}:${eventName}`
+        } else {
+          return prefix + eventName
+        }
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
@@ -306,7 +318,11 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'bind') {
-        return prefix + eventName
+        if (eventName.includes('-')) {
+          return `${prefix}:${eventName}`
+        } else {
+          return prefix + eventName
+        }
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
@@ -377,7 +393,11 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'bind') {
-        return prefix + eventName
+        if (eventName.includes('-')) {
+          return `${prefix}:${eventName}`
+        } else {
+          return prefix + eventName
+        }
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
@@ -434,7 +454,11 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'bind') {
-        return prefix + eventName
+        if (eventName.includes('-')) {
+          return `${prefix}:${eventName}`
+        } else {
+          return prefix + eventName
+        }
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
@@ -491,7 +515,11 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'bind') {
-        return prefix + eventName
+        if (eventName.includes('-')) {
+          return `${prefix}:${eventName}`
+        } else {
+          return prefix + eventName
+        }
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',

package/lib/platform/style/wx/index.js

@@ -13,6 +13,7 @@ module.exports = function getSpec ({ warn, error }) {
   const cssVariableExp = /var\(/
   // calc(xx)
   const calcExp = /calc\(/
+  const envExp = /env\(/
   // 不支持的属性提示
   const unsupportedPropError = ({ prop, value, selector }, { mode }, isError = true) => {
     const tips = isError ? error : warn
@@ -85,15 +86,45 @@ module.exports = function getSpec ({ warn, error }) {
       if (rule[1].test(prop)) return rule[0]
     }
   }
+  // 多value解析
+  const parseValues = (str, char = ' ') => {
+    let stack = 0
+    let temp = ''
+    const result = []
+    for (let i = 0; i < str.length; i++) {
+      if (str[i] === '(') {
+        stack++
+      } else if (str[i] === ')') {
+        stack--
+      }
+      // 非括号内 或者 非分隔字符且非空
+      if (stack !== 0 || (str[i] !== char && str[i] !== ' ')) {
+        temp += str[i]
+      }
+      if ((stack === 0 && str[i] === char) || i === str.length - 1) {
+        result.push(temp)
+        temp = ''
+      }
+    }
+    return result
+  }
+  // const getDefaultValueFromVar = (str) => {
+  //   const totalVarExp = /^var\((.+)\)$/
+  //   if (!totalVarExp.test(str)) return str
+  //   const newVal = parseValues((str.match(totalVarExp)?.[1] || ''), ',')
+  //   if (newVal.length <= 1) return ''
+  //   if (!totalVarExp.test(newVal[1])) return newVal[1]
+  //   return getDefaultValueFromVar(newVal[1])
+  // }
   // 属性值校验
   const verifyValues = ({ prop, value, selector }, isError = true) => {
     prop = prop.trim()
     value = value.trim()
     const tips = isError ? error : warn
-    if (cssVariableExp.test(value) || calcExp.test(value)) return true
+    if (cssVariableExp.test(value) || calcExp.test(value) || envExp.test(value)) return true
     const namedColor = ['transparent', 'aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure', 'beige', 'bisque', 'black', 'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'fuchsia', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green', 'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'lime', 'limegreen', 'linen', 'magenta', 'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'navy', 'oldlace', 'olive', 'olivedrab', 'orange', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'purple', 'rebeccapurple', 'red', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue', 'slateblue', 'slategray', 'snow', 'springgreen', 'steelblue', 'tan', 'teal', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'white', 'whitesmoke', 'yellow', 'yellowgreen']
     const valueExp = {
-      number: /^((-?\d+(\.\d+)?)(rpx|px|%|vw|vh)?|hairlineWidth)$/,
+      number: /^((-?(\d+(\.\d+)?|\.\d+))(rpx|px|%|vw|vh)?|hairlineWidth)$/,
       color: new RegExp(('^(' + namedColor.join('|') + ')$') + '|(^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$)|^(rgb|rgba|hsl|hsla|hwb)\\(.+\\)$')
     }
     const type = getValueType(prop)
@@ -164,7 +195,7 @@ module.exports = function getSpec ({ warn, error }) {
   const formatAbbreviation = ({ prop, value, selector }, { mode }) => {
     const original = `${prop}:${value}`
     const props = AbbreviationMap[prop]
-    const values = value.trim().split(/\s(?![^()]*\))/)
+    const values = parseValues(value)
     const cssMap = []
     let idx = 0
     let propsIdx = 0
@@ -172,7 +203,7 @@ module.exports = function getSpec ({ warn, error }) {
     while (idx < values.length) {
       const prop = props[propsIdx]
       if (!prop) {
-        error(`Value of [${original}] in ${selector} has not enough props to assign, please check again!`)
+        warn(`Value of [${original}] in ${selector} has not enough props to assign, please check again!`)
         break
       }
       const value = values[idx]
@@ -226,7 +257,7 @@ module.exports = function getSpec ({ warn, error }) {
 
   // margin padding
   const formatMargins = ({ prop, value, selector }) => {
-    const values = value.trim().split(/\s(?![^()]*\))/)
+    const values = parseValues(value)
     // format
     let suffix = []
     switch (values.length) {
@@ -256,7 +287,7 @@ module.exports = function getSpec ({ warn, error }) {
   const formatLineHeight = ({ prop, value, selector }) => {
     return verifyValues({ prop, value, selector }) && ({
       prop,
-      value: /^\s*-?\d+(\.\d+)?\s*$/.test(value) ? `${Math.round(value * 100)}%` : value
+      value: /^\s*(-?(\d+(\.\d+)?|\.\d+))\s*$/.test(value) ? `${Math.round(value * 100)}%` : value
     })
   }
 
@@ -273,7 +304,7 @@ module.exports = function getSpec ({ warn, error }) {
       all: 'background'
     }
     const urlExp = /url\(["']?(.*?)["']?\)/
-    const linerExp = /linear-gradient\(["']?(.*?)["']?\)/
+    const linerExp = /linear-gradient\(.*\)\s*$/
     switch (prop) {
       case bgPropMap.image: {
         // background-image 仅支持背景图
@@ -293,12 +324,12 @@ module.exports = function getSpec ({ warn, error }) {
         // 不支持逗号分隔的多个值：设置多重背景!!!
         // 支持一个值:这个值指定图片的宽度，图片的高度隐式的为 auto
         // 支持两个值:第一个值指定图片的宽度，第二个值指定图片的高度
-        if (value.includes(',')) { // commas are not allowed in values
+        if (parseValues(value, ',').length > 1) { // commas are not allowed in values
           error(`Value of [${bgPropMap.size}] in ${selector} does not support commas, received [${value}], please check again!`)
           return false
         }
         const values = []
-        value.trim().split(/\s(?![^()]*\))/).forEach(item => {
+        parseValues(value).forEach(item => {
           if (verifyValues({ prop, value: item, selector })) {
             // 支持 number 值 / container cover auto 枚举
             values.push(item)
@@ -309,7 +340,7 @@ module.exports = function getSpec ({ warn, error }) {
       }
       case bgPropMap.position: {
         const values = []
-        value.trim().split(/\s(?![^()]*\))/).forEach(item => {
+        parseValues(value).forEach(item => {
           if (verifyValues({ prop, value: item, selector })) {
             // 支持 number 值 /  枚举, center与50%等价
             values.push(item === 'center' ? '50%' : item)
@@ -322,7 +353,7 @@ module.exports = function getSpec ({ warn, error }) {
       case bgPropMap.all: {
         // background: 仅支持 background-image & background-color & background-repeat
         const bgMap = []
-        const values = value.trim().split(/\s(?![^()]*\))/)
+        const values = parseValues(value)
         values.forEach(item => {
           const url = item.match(urlExp)?.[0]
           const linerVal = item.match(linerExp)?.[0]
@@ -345,7 +376,7 @@ module.exports = function getSpec ({ warn, error }) {
 
   // border-radius 缩写转换
   const getBorderRadius = ({ prop, value, selector }, { mode }) => {
-    const values = value.trim().split(/\s(?![^()]*\))/)
+    const values = parseValues(value)
     if (values.length === 1) {
       verifyValues({ prop, value, selector }, false)
       return { prop, value }
@@ -362,7 +393,7 @@ module.exports = function getSpec ({ warn, error }) {
   // transform 转换
   const formatTransform = ({ prop, value, selector }, { mode }) => {
     if (Array.isArray(value)) return { prop, value }
-    const values = value.trim().split(/\s(?![^()]*\))/)
+    const values = parseValues(value)
     const transform = []
     values.forEach(item => {
       const match = item.match(/([/\w]+)\(([^)]+)\)/)
@@ -398,6 +429,10 @@ module.exports = function getSpec ({ warn, error }) {
               // 2 个以上的值处理
               key = key.replace('3d', '')
               const vals = val.split(',').splice(0, key === 'rotate' ? 4 : 3)
+              // scale(.5) === scaleX(.5) scaleY(.5)
+              if (vals.length === 1 && key === 'scale') {
+                vals.push(vals[0])
+              }
               const xyz = ['X', 'Y', 'Z']
               transform.push(...vals.map((v, index) => {
                 if (key !== 'rotate' && index > 1) {
@@ -429,7 +464,7 @@ module.exports = function getSpec ({ warn, error }) {
   }
 
   const getIntegersFlex = ({ prop, value, selector }) => {
-    if (isNumber(value) && value >= 0) {
+    if ((isNumber(value) && value >= 0) || cssVariableExp.test(value)) {
       return { prop, value }
     } else {
       error(`Value of [${prop}] in ${selector} accepts any floating point value >= 0, received [${value}], please check again!`)
@@ -438,7 +473,7 @@ module.exports = function getSpec ({ warn, error }) {
   }
 
   const formatFlex = ({ prop, value, selector }) => {
-    let values = value.trim().split(/\s(?![^()]*\))/)
+    let values = parseValues(value)
     if (values.length > 3) {
       error(`Value of [flex] in ${selector} supports up to three values, received [${value}], please check again!`)
       values = values.splice(0, 3)
@@ -461,14 +496,14 @@ module.exports = function getSpec ({ warn, error }) {
     }
     // 最后一个值是flexBasis 的有效值（auto或者有单位百分比、px等）
     // flex 0 1 auto flex auto flex 1 auto flex 1 30px flex 1 10% flex 1 1 auto
-    if (!isNumber(lastOne)) {
+    if (!isNumber(lastOne) || !cssVariableExp.test(value)) {
       // 添加 grow 和 shrink
       // 在设置 flex basis 有效值的场景下，如果没有设置 grow 和 shrink，则默认为1
       // 单值 flex: 1 1 <flex-basis>
       // 双值 flex: <flex-grow> 1 <flex-basis>
       // 三值 flex: <flex-grow> <flex-shrink> <flex-basis>
       for (let i = 0; i < 2; i++) {
-        const item = getIntegersFlex({ prop: AbbreviationMap[prop][i], value: isNumber(values[i]) ? values[i] : 1 })
+        const item = getIntegersFlex({ prop: AbbreviationMap[prop][i], value: isNumber(values[i]) || cssVariableExp.test(value) ? values[i] : 1 })
         item && cssMap.push(item)
       }
       if (!isAuto) {

package/lib/platform/template/wx/index.js

@@ -5,6 +5,7 @@ const normalizeComponentRules = require('../normalize-component-rules')
 const isValidIdentifierStr = require('../../../utils/is-valid-identifier-str')
 const { parseMustacheWithContext, stringifyWithResolveComputed } = require('../../../template-compiler/compiler')
 const normalize = require('../../../utils/normalize')
+const { dash2hump } = require('../../../utils/hump-dash')
 
 module.exports = function getSpec ({ warn, error }) {
   const spec = {
@@ -301,9 +302,7 @@ module.exports = function getSpec ({ warn, error }) {
           const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'ali' })
           const rEventName = runRules(eventRules, eventName, { mode: 'ali' })
           return {
-            name: rPrefix + rEventName.replace(/^./, (matched) => {
-              return matched.toUpperCase()
-            }) + modifierStr,
+            name: dash2hump(rPrefix + '-' + rEventName) + modifierStr,
             value
           }
         },
@@ -312,8 +311,9 @@ module.exports = function getSpec ({ warn, error }) {
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'swan' })
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'swan' })
           const rEventName = runRules(eventRules, eventName, { mode: 'swan' })
+          if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value
@@ -324,8 +324,9 @@ module.exports = function getSpec ({ warn, error }) {
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'qq' })
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'qq' })
           const rEventName = runRules(eventRules, eventName, { mode: 'qq' })
+          if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value
@@ -336,8 +337,9 @@ module.exports = function getSpec ({ warn, error }) {
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'jd' })
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'jd' })
           const rEventName = runRules(eventRules, eventName, { mode: 'jd' })
+          if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value
@@ -360,8 +362,9 @@ module.exports = function getSpec ({ warn, error }) {
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'tt' })
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'tt' })
           const rEventName = runRules(eventRules, eventName, { mode: 'tt' })
+          if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value
@@ -372,8 +375,9 @@ module.exports = function getSpec ({ warn, error }) {
           const prefix = match[1]
           const eventName = match[2]
           const modifierStr = match[3] || ''
-          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'dd' })
+          let rPrefix = runRules(spec.event.prefix, prefix, { mode: 'dd' })
           const rEventName = runRules(eventRules, eventName, { mode: 'dd' })
+          if (rEventName.includes('-')) rPrefix += ':'
           return {
             name: rPrefix + rEventName + modifierStr,
             value

package/lib/react/style-helper.js

@@ -20,11 +20,8 @@ function getClassMap ({ content, filename, mode, srcMode, warn, error }) {
     if ((matched = numberRegExp.exec(value))) {
       value = matched[1]
       needStringify = false
-    } else if ((matched = unitRegExp.exec(value))) {
-      value = `global.__unit.${matched[2]}(${matched[1]})`
-      needStringify = false
-    } else if (hairlineRegExp.test(value)) {
-      value = 'global.__hairlineWidth'
+    } else if (unitRegExp.test(value) || hairlineRegExp.test(value)) {
+      value = `global.__formatValue(${JSON.stringify(value)})`
       needStringify = false
     }
     return needStringify ? JSON.stringify(value) : value

package/lib/runtime/components/react/dist/mpx-button.jsx

@@ -179,7 +179,8 @@ const Button = forwardRef((buttonProps, ref) => {
         ...(applyHoverEffect && hoverStyle)
     };
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const { nodeRef } = useNodesRef(props, ref, { defaultStyle });
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, { defaultStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle);
     if (backgroundStyle) {

package/lib/runtime/components/react/dist/mpx-checkbox-group.jsx

@@ -25,7 +25,8 @@ const CheckboxGroup = forwardRef((props, ref) => {
         ...style
     };
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const { nodeRef } = useNodesRef(props, ref, { defaultStyle });
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, { defaultStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const getSelectionValue = () => {
         const arr = [];

package/lib/runtime/components/react/dist/mpx-checkbox.jsx

@@ -4,7 +4,7 @@
  * ✔ checked
  * ✔ color
  */
-import { useState, forwardRef, useEffect, useContext } from 'react';
+import { useState, useRef, forwardRef, useEffect, useContext } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
@@ -76,7 +76,8 @@ const Checkbox = forwardRef((checkboxProps, ref) => {
         onChange(evt);
     };
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const { nodeRef } = useNodesRef(props, ref, {
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
         defaultStyle,
         change: onChange
     });

package/lib/runtime/components/react/dist/mpx-form.jsx

@@ -16,7 +16,8 @@ const _Form = forwardRef((fromProps, ref) => {
     const { style, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const { textStyle, innerStyle } = splitStyle(normalStyle);
-    const { nodeRef: formRef } = useNodesRef(props, ref);
+    const formRef = useRef(null);
+    useNodesRef(props, ref, formRef);
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef });
     const submit = () => {
         const { bindsubmit } = props;

package/lib/runtime/components/react/dist/mpx-icon.jsx

@@ -3,7 +3,7 @@
  * ✔ size
  * ✔ color
  */
-import { forwardRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import { Image } from 'react-native';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef';
@@ -28,7 +28,8 @@ const Icon = forwardRef((props, ref) => {
         ...style
     };
     const { hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const { nodeRef } = useNodesRef(props, ref, { defaultStyle });
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, { defaultStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const innerProps = useInnerProps(props, {
         ref: nodeRef,

package/lib/runtime/components/react/dist/mpx-image/index.jsx

@@ -67,7 +67,8 @@ const Image = forwardRef((props, ref) => {
         ...style,
         overflow: 'hidden'
     };
-    const { nodeRef } = useNodesRef(props, ref, {
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
         defaultStyle
     });
     const onLayout = ({ nativeEvent: { layout: { width, height } } }) => {

package/lib/runtime/components/react/dist/mpx-input.jsx

@@ -79,7 +79,8 @@ const Input = forwardRef((props, ref) => {
         }
     };
     const { hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const { nodeRef } = useNodesRef(props, ref);
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef);
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     useEffect(() => {
         if (inputValue !== value) {

package/lib/runtime/components/react/dist/mpx-label.jsx

@@ -19,7 +19,8 @@ const Label = forwardRef((labelProps, ref) => {
         ...style
     };
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const { nodeRef } = useNodesRef(props, ref, { defaultStyle });
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, { defaultStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle);
     if (backgroundStyle) {

package/lib/runtime/components/react/dist/mpx-movable-area.jsx

@@ -2,7 +2,7 @@
  * ✘ scale-area
  */
 import { View } from 'react-native';
-import { useState, useEffect, forwardRef } from 'react';
+import { useState, useEffect, forwardRef, useRef } from 'react';
 import useNodesRef from './useNodesRef';
 import useInnerProps from './getInnerListeners';
 import { MovableAreaContext } from './context';
@@ -16,7 +16,8 @@ const _MovableArea = forwardRef((props, ref) => {
         setAreaHeight(height);
     }, [width, height]);
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const { nodeRef: movableViewRef } = useNodesRef(props, ref);
+    const movableViewRef = useRef(null);
+    useNodesRef(props, ref, movableViewRef);
     const onLayout = (e) => {
         const { width = 10, height = 10 } = e.nativeEvent.layout;
         setAreaWidth(width);

package/lib/runtime/components/react/dist/mpx-movable-view.jsx

@@ -41,7 +41,8 @@ const _MovableView = forwardRef((props, ref) => {
         x: Number(x),
         y: Number(y)
     });
-    const { nodeRef } = useNodesRef(props, ref, {
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
         defaultStyle: styles.container
     });
     let panResponder = {};

package/lib/runtime/components/react/dist/mpx-picker/date.jsx

@@ -27,7 +27,8 @@ const _DatePicker = forwardRef((props, ref) => {
     const [datevalue, setDateValue] = useState(value);
     // 存储layout布局信息
     const layoutRef = useRef({});
-    const { nodeRef: viewRef } = useNodesRef(props, ref, {});
+    const viewRef = useRef(null);
+    useNodesRef(props, ref, viewRef, {});
     useEffect(() => {
         value && setDateValue(value);
     }, [value]);

package/lib/runtime/components/react/dist/mpx-picker/index.jsx

@@ -30,7 +30,8 @@ import { FormContext } from '../context';
 const _Picker = forwardRef((props, ref) => {
     const { mode = 'selector', value, bindcancel, bindchange, children, bindcolumnchange } = props;
     const innerLayout = useRef({});
-    const { nodeRef } = useNodesRef(props, ref, {});
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {});
     const innerProps = useInnerProps(props, {
         ref: nodeRef
     }, [], { layoutRef: innerLayout });

package/lib/runtime/components/react/dist/mpx-picker/multiSelector.jsx

@@ -86,7 +86,8 @@ const _MultiSelectorPicker = forwardRef((props, ref) => {
     const [data, setData] = useState(formatRange || []);
     // 存储layout布局信息
     const layoutRef = useRef({});
-    const { nodeRef: viewRef } = useNodesRef(props, ref, {});
+    const viewRef = useRef(null);
+    useNodesRef(props, ref, viewRef, {});
     useEffect(() => {
         if (range) {
             const newFormatRange = formatRangeFun(range, props['range-key']);

package/lib/runtime/components/react/dist/mpx-picker/region.jsx

@@ -40,7 +40,8 @@ const _RegionPicker = forwardRef((props, ref) => {
     const [regionvalue, setRegionValue] = useState(value);
     // 存储layout布局信息
     const layoutRef = useRef({});
-    const { nodeRef: viewRef } = useNodesRef(props, ref, {});
+    const viewRef = useRef(null);
+    useNodesRef(props, ref, viewRef, {});
     const onChange = (value) => {
         // 通过 value 查找 code
         let tmp = regionData;

package/lib/runtime/components/react/dist/mpx-picker/selector.jsx

@@ -27,7 +27,8 @@ const _SelectorPicker = forwardRef((props, ref) => {
     const [data, setData] = useState(formatRange || []);
     // 存储layout布局信息
     const layoutRef = useRef({});
-    const { nodeRef: viewRef } = useNodesRef(props, ref, {});
+    const viewRef = useRef(null);
+    useNodesRef(props, ref, viewRef, {});
     useEffect(() => {
         if (range) {
             const newFormatRange = formatRangeFun(range, props['range-key']);

package/lib/runtime/components/react/dist/mpx-picker/time.jsx

@@ -126,10 +126,12 @@ const _TimePicker = forwardRef((props, ref) => {
     const [timevalue, setTimeValue] = useState(defaultValue);
     // 存储layout布局信息
     const layoutRef = useRef({});
-    const { nodeRef: viewRef } = useNodesRef(props, ref, {});
+    const viewRef = useRef(null);
+    useNodesRef(props, ref, viewRef, {});
     // 存储modal的布局信息
     const modalLayoutRef = useRef({});
-    const { nodeRef: modalRef } = useNodesRef(props, ref, {});
+    const modalRef = useRef(null);
+    useNodesRef(props, ref, modalRef, {});
     const [visible, setVisible] = useState(false);
     const columnData = generateColumns();
     const [data, setData] = useState(columnData);

package/lib/runtime/components/react/dist/mpx-picker-view-column.jsx

@@ -1,5 +1,5 @@
 import { View, Animated, SafeAreaView } from 'react-native';
-import React, { forwardRef, useState, useEffect } from 'react';
+import React, { forwardRef, useRef, useState, useEffect } from 'react';
 import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
 const defaultItemHeight = 36;
@@ -13,7 +13,8 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     const { textProps } = splitProps(props);
     // const { innerStyle } = splitStyle(normalStyle)
     // scrollView的ref
-    const { nodeRef: scrollViewRef } = useNodesRef(props, ref, {});
+    const scrollViewRef = useRef(null);
+    useNodesRef(props, ref, scrollViewRef, {});
     // 每个元素的高度
     let [itemH, setItemH] = useState(0);
     useEffect(() => {

package/lib/runtime/components/react/dist/mpx-picker-view.jsx

@@ -30,7 +30,8 @@ const _PickerView = forwardRef((props, ref) => {
     // 微信设置到pick-view上上设置的normalStyle如border等需要转换成RN的style然后进行透传
     const indicatorStyle = parseInlineStyle(props['indicator-style']);
     const { height: indicatorH, width: indicatorW } = indicatorStyle;
-    const { nodeRef } = useNodesRef(props, ref, {});
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {});
     //  picker-view 设置的color等textStyle,在小程序上的表现是可以继承到最内层的text样式, 但是RN内部column是slot无法设置, 需要业务自己在column内的元素上设置
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
     const { textStyle } = splitStyle(normalStyle);

package/lib/runtime/components/react/dist/mpx-radio-group.jsx

@@ -25,7 +25,8 @@ const radioGroup = forwardRef((props, ref) => {
         ...style
     };
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const { nodeRef } = useNodesRef(props, ref, { defaultStyle });
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, { defaultStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const getSelectionValue = () => {
         for (const key in groupValue) {