@mpxjs/webpack-plugin 2.10.24 → 2.11.0

package/lib/runtime/components/react/dist/mpx-canvas/index.d.ts

@@ -17,10 +17,8 @@ interface CanvasProps {
     style?: Record<string, any>;
     originWhitelist?: Array<string>;
     'enable-var'?: boolean;
-    'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;
-    'external-var-context'?: Record<string, any>;
     bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent>) => void;
     bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void;
     bindtouchend?: (event: NativeSyntheticEvent<TouchEvent>) => void;

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

@@ -39,13 +39,11 @@ const stylesheet = StyleSheet.create({
     }
 });
 const _Canvas = forwardRef((props = {}, ref) => {
-    const { style = {}, originWhitelist = ['*'], 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { style = {}, originWhitelist = ['*'], 'enable-var': enableVar, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const [isLoaded, setIsLoaded] = useState(false);
     const nodeRef = useRef(null);
     const { normalStyle, hasSelfPercent, hasPositionFixed, setWidth, setHeight } = useTransformStyle(extendObject({}, style, stylesheet.container), {
         enableVar,
-        externalVarContext,
-        parentFontSize,
         parentWidth,
         parentHeight
     });

package/lib/runtime/components/react/dist/mpx-canvas/utils.d.ts

@@ -30,7 +30,7 @@ export interface WebviewMessage {
     };
 }
 export interface CanvasInstance {
-    webview: WebView | null;
+    webview: WebView<any> | null;
     bus: Bus | null;
     context2D: CanvasRenderingContext2D;
     getContext: (contextType: string) => CanvasRenderingContext2D | null;

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

@@ -9,8 +9,6 @@ export interface CheckboxGroupProps {
     style?: ViewStyle & Record<string, any>;
     'enable-offset'?: boolean;
     'enable-var'?: boolean;
-    'external-var-context'?: Record<string, any>;
-    'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;
     children: ReactNode;

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

@@ -12,7 +12,7 @@ import Portal from './mpx-portal';
 const CheckboxGroup = forwardRef((props, ref) => {
     const propsRef = useRef({});
     propsRef.current = props;
-    const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { style = {}, 'enable-var': enableVar, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const formContext = useContext(FormContext);
     let formValuesMap;
     if (formContext) {
@@ -23,8 +23,7 @@ const CheckboxGroup = forwardRef((props, ref) => {
         flexDirection: 'row',
         flexWrap: 'wrap'
     };
-    const styleObj = extendObject({}, defaultStyle, style);
-    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentWidth, parentHeight, defaultStyle });
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, { style: normalStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
@@ -83,7 +82,7 @@ const CheckboxGroup = forwardRef((props, ref) => {
             notifyChange
         };
     }, []);
-    const finalComponent = createElement(View, innerProps, createElement(CheckboxGroupContext.Provider, { value: contextValue }, wrapChildren(props, {
+    const finalComponent = createElement(View, innerProps, createElement(CheckboxGroupContext.Provider, { value: contextValue }, wrapChildren(props.children, {
         hasVarDec,
         varContext: varContextRef.current
     })));

package/lib/runtime/components/react/dist/mpx-checkbox.d.ts

@@ -18,8 +18,7 @@ export interface CheckboxProps extends Selection {
     groupValue?: Array<string>;
     'enable-offset'?: boolean;
     'enable-var'?: boolean;
-    'external-var-context'?: Record<string, any>;
-    'parent-font-size'?: number;
+    'enable-text-pass-through'?: boolean;
     'parent-width'?: number;
     'parent-height'?: number;
     children?: ReactNode;

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

@@ -10,7 +10,7 @@ import { warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import Icon from './mpx-icon';
-import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useTextPassThroughValue } from './utils';
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useTextPassThrough } from './utils';
 import { CheckboxGroupContext, LabelContext } from './context';
 import Portal from './mpx-portal';
 const styles = StyleSheet.create({
@@ -41,13 +41,12 @@ const styles = StyleSheet.create({
 });
 const Checkbox = forwardRef((checkboxProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(checkboxProps);
-    const { value = '', disabled = false, checked = false, color = '#09BB07', style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindtap, _onChange } = props;
+    const { value = '', disabled = false, checked = false, color = '#09BB07', style = {}, 'enable-var': enableVar, 'enable-text-pass-through': enableTextPassThrough, 'parent-width': parentWidth, 'parent-height': parentHeight, bindtap, _onChange } = props;
     const [isChecked, setIsChecked] = useState(!!checked);
     const groupContext = useContext(CheckboxGroupContext);
     let groupValue;
     let notifyChange;
-    const defaultStyle = extendObject({}, styles.wrapper, disabled ? styles.wrapperDisabled : null);
-    const styleObj = extendObject({}, styles.container, style);
+    const wrapperStyle = extendObject({}, styles.wrapper, disabled ? styles.wrapperDisabled : null);
     const onChange = (evt) => {
         if (disabled)
             return;
@@ -64,15 +63,15 @@ const Checkbox = forwardRef((checkboxProps, ref) => {
         bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props));
         onChange(evt);
     };
-    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentWidth, parentHeight, defaultStyle: styles.container });
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, {
-        style: extendObject({}, defaultStyle, normalStyle),
+        style: normalStyle,
         change: onChange
     });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle);
-    const textPassThrough = useTextPassThroughValue(textStyle, textProps);
+    const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough });
     if (backgroundStyle) {
         warn('Checkbox does not support background image-related styles!');
     }
@@ -118,12 +117,12 @@ const Checkbox = forwardRef((checkboxProps, ref) => {
             }
         }
     }, [checked]);
-    const finalComponent = createElement(View, innerProps, createElement(View, { style: defaultStyle }, createElement(Icon, {
+    const finalComponent = createElement(View, innerProps, createElement(View, { style: wrapperStyle }, createElement(Icon, {
         type: 'success_no_circle',
         size: 18,
         color: disabled ? '#ADADAD' : color,
         style: isChecked ? styles.iconChecked : styles.icon
-    })), wrapChildren(props, {
+    })), wrapChildren(props.children, {
         hasVarDec,
         varContext: varContextRef.current,
         textPassThrough

package/lib/runtime/components/react/dist/mpx-form.d.ts

@@ -12,8 +12,7 @@ interface FormProps {
     children?: ReactNode;
     'enable-offset'?: boolean;
     'enable-var'?: boolean;
-    'external-var-context'?: Record<string, any>;
-    'parent-font-size'?: number;
+    'enable-text-pass-through'?: boolean;
     'parent-width'?: number;
     'parent-height'?: number;
     bindsubmit?: (evt: {

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

@@ -9,13 +9,13 @@ import { useRef, forwardRef, useMemo, createElement } from 'react';
 import useNodesRef from './useNodesRef';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import { FormContext } from './context';
-import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren, extendObject, useTextPassThroughValue } from './utils';
+import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren, extendObject, useTextPassThrough } from './utils';
 const _Form = forwardRef((fromProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(fromProps);
-    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 { style, 'enable-var': enableVar, 'enable-text-pass-through': enableTextPassThrough, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentWidth, parentHeight });
     const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
-    const textPassThrough = useTextPassThroughValue(textStyle, textProps);
+    const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough });
     const formRef = useRef(null);
     useNodesRef(props, ref, formRef, {
         style: normalStyle
@@ -58,7 +58,7 @@ const _Form = forwardRef((fromProps, ref) => {
             reset
         };
     }, []);
-    return createElement(View, innerProps, createElement(FormContext.Provider, { value: contextValue }, wrapChildren(props, {
+    return createElement(View, innerProps, createElement(FormContext.Provider, { value: contextValue }, wrapChildren(props.children, {
         hasVarDec,
         varContext: varContextRef.current,
         textPassThrough

package/lib/runtime/components/react/dist/mpx-icon/index.d.ts

@@ -9,8 +9,6 @@ export interface IconProps {
     style?: TextStyle & Record<string, any>;
     'enable-offset'?: boolean;
     'enable-var'?: boolean;
-    'external-var-context'?: Record<string, any>;
-    'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;
 }

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

@@ -30,11 +30,11 @@ const IconTypeMap = new Map([
     ['clear', Clear]
 ]);
 const Icon = forwardRef((props, ref) => {
-    const { type, size = 23, color, style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { type, size = 23, color, style = {}, 'enable-var': enableVar, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const source = IconTypeMap.get(type);
     const defaultStyle = { width: ~~size, height: ~~size };
     const styleObj = extendObject({}, defaultStyle, style);
-    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, parentWidth, parentHeight });
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, { style: normalStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });

package/lib/runtime/components/react/dist/mpx-image.d.ts

@@ -8,8 +8,6 @@ export interface ImageProps {
     style?: ImageStyle & Record<string, any>;
     'enable-offset'?: boolean;
     'enable-var'?: boolean;
-    'external-var-context'?: Record<string, any>;
-    'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;
     'enable-fast-image'?: boolean;

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

@@ -12,33 +12,52 @@
  */
 import { useEffect, useMemo, useState, useRef, forwardRef, createElement } from 'react';
 import { Image as RNImage, View } from 'react-native';
-import { noop } from '@mpxjs/utils';
+import { hasOwn, noop } from '@mpxjs/utils';
 import { LocalSvg, SvgCssUri } from 'react-native-svg/css';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject, isAndroid } from './utils';
+import { svgRegExp, useLayout, useTransformStyle, renderImage, extendObject, isAndroid } from './utils';
 import Portal from './mpx-portal';
 const DEFAULT_IMAGE_WIDTH = 320;
 const DEFAULT_IMAGE_HEIGHT = 240;
-const cropMode = [
-    'top',
-    'bottom',
-    'center',
-    'right',
-    'left',
-    'top left',
-    'top right',
-    'bottom left',
-    'bottom right'
-];
-const ModeMap = new Map([
-    ['scaleToFill', 'stretch'],
-    ['aspectFit', 'contain'],
-    ['aspectFill', 'cover'],
-    ['widthFix', 'stretch'],
-    ['heightFix', 'stretch'],
-    ...cropMode.map(mode => [mode, 'stretch'])
-]);
+const cropModeMap = {
+    top: true,
+    bottom: true,
+    center: true,
+    right: true,
+    left: true,
+    'top left': true,
+    'top right': true,
+    'bottom left': true,
+    'bottom right': true
+};
+const modeResizeMap = {
+    scaleToFill: 'stretch',
+    aspectFit: 'contain',
+    aspectFill: 'cover',
+    widthFix: 'stretch',
+    heightFix: 'stretch',
+    top: 'stretch',
+    bottom: 'stretch',
+    center: 'stretch',
+    right: 'stretch',
+    left: 'stretch',
+    'top left': 'stretch',
+    'top right': 'stretch',
+    'bottom left': 'stretch',
+    'bottom right': 'stretch'
+};
+const DEFAULT_IMAGE_STYLE = {
+    width: DEFAULT_IMAGE_WIDTH,
+    height: DEFAULT_IMAGE_HEIGHT
+};
+const OVERFLOW_HIDDEN_STYLE = { overflow: 'hidden' };
+const SVG_TRANSFORM_ORIGIN_STYLE = { transformOrigin: 'left top' };
+const BASE_IMAGE_FILL_STYLE = {
+    transformOrigin: 'left top',
+    width: '100%',
+    height: '100%'
+};
 const isNumber = (value) => typeof value === 'number';
 const relativeCenteredSize = (viewSize, imageSize) => {
     return (viewSize - imageSize) / 2;
@@ -51,7 +70,7 @@ function getImageUri(src) {
 }
 function isSvgSource(src) {
     const uri = getImageUri(src);
-    return SVG_REGEXP.test(uri);
+    return svgRegExp.test(uri);
 }
 function getImageSize(src, success, fail = noop) {
     if (typeof src === 'string') {
@@ -92,22 +111,16 @@ const getFixedHeight = (viewWidth, viewHeight, ratio) => {
     return !fixed ? viewHeight : fixed;
 };
 const Image = forwardRef((props, ref) => {
-    const { src = '', mode = 'scaleToFill', style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'enable-fast-image': enableFastImage, 'parent-width': parentWidth, 'parent-height': parentHeight, 'is-svg': isSvgProp, bindload, binderror } = props;
-    const defaultStyle = {
-        width: DEFAULT_IMAGE_WIDTH,
-        height: DEFAULT_IMAGE_HEIGHT
-    };
-    const styleObj = extendObject({}, defaultStyle, style, { overflow: 'hidden' });
+    const { src = '', mode = 'scaleToFill', style = {}, 'enable-var': enableVar, 'enable-fast-image': enableFastImage, 'parent-width': parentWidth, 'parent-height': parentHeight, 'is-svg': isSvgProp, bindload, binderror } = props;
+    const styleObj = extendObject({}, style, OVERFLOW_HIDDEN_STYLE);
     const nodeRef = useRef(null);
-    useNodesRef(props, ref, nodeRef, {
-        defaultStyle
-    });
-    const isSvg = isSvgProp || isSvgSource(src);
+    const isSvg = useMemo(() => isSvgProp || isSvgSource(src), [isSvgProp, src]);
+    const imageSource = useMemo(() => normalizeImageSource(src), [src]);
     const isWidthFixMode = mode === 'widthFix';
     const isHeightFixMode = mode === 'heightFix';
-    const isCropMode = cropMode.includes(mode);
+    const isCropMode = hasOwn(cropModeMap, mode);
     const isLayoutMode = isWidthFixMode || isHeightFixMode || isCropMode;
-    const resizeMode = ModeMap.get(mode) || 'stretch';
+    const resizeMode = hasOwn(modeResizeMap, mode) ? modeResizeMap[mode] : 'stretch';
     const onLayout = ({ nativeEvent: { layout: { width, height } } }) => {
         state.current.viewWidth = width;
         state.current.viewHeight = height;
@@ -127,14 +140,18 @@ const Image = forwardRef((props, ref) => {
             setLoaded(true);
         }
     };
-    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, transformRadiusPercent: isAndroid && !isSvg && !isLayoutMode, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, transformRadiusPercent: isAndroid && !isSvg && !isLayoutMode, parentWidth, parentHeight, defaultStyle: DEFAULT_IMAGE_STYLE });
+    // normalStyle 已合入 DEFAULT_IMAGE_STYLE，对外暴露完整 style（含 default 兜底的 width/height）
+    useNodesRef(props, ref, nodeRef, {
+        style: normalStyle
+    });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({
         props,
         hasSelfPercent,
         setWidth,
         setHeight,
         nodeRef,
-        onLayout: isLayoutMode ? onLayout : noop
+        onLayout: isLayoutMode ? onLayout : undefined
     });
     const { width, height } = normalStyle;
     const [viewWidth, setViewWidth] = useState(isNumber(width) ? width : 0);
@@ -350,23 +367,22 @@ const Image = forwardRef((props, ref) => {
     function renderSvgImage() {
         const svgProps = {
             onLayout: onSvgLoad,
-            style: extendObject({ transformOrigin: 'left top' }, modeStyle)
+            style: extendObject({}, SVG_TRANSFORM_ORIGIN_STYLE, modeStyle)
         };
         return createElement(View, innerProps, typeof src === 'string'
             ? createElement(SvgCssUri, extendObject({ uri: src, onError: binderror && onSvgError }, svgProps))
             : createElement(LocalSvg, extendObject({ asset: src }, svgProps)));
     }
     function renderBaseImage() {
+        const baseImageStyle = isCropMode
+            ? extendObject({ transformOrigin: 'left top', width: imageWidth, height: imageHeight }, modeStyle)
+            : BASE_IMAGE_FILL_STYLE;
         return renderImage(extendObject({
-            source: normalizeImageSource(src),
+            source: imageSource,
             resizeMode: resizeMode,
             onLoad: bindload && onImageLoad,
             onError: binderror && onImageError,
-            style: extendObject({
-                transformOrigin: 'left top',
-                width: isCropMode ? imageWidth : '100%',
-                height: isCropMode ? imageHeight : '100%'
-            }, isCropMode ? modeStyle : {})
+            style: baseImageStyle
         }, isLayoutMode ? {} : innerProps), enableFastImage);
     }
     function renderLayoutImage() {

package/lib/runtime/components/react/dist/mpx-inline-text.jsx

@@ -1,14 +1,23 @@
 import { Text } from 'react-native';
 import { createElement, useContext } from 'react';
-import { extendObject, getDefaultAllowFontScaling } from './utils';
+import { extendObject, getDefaultAllowFontScaling, resolveTextLineHeightPercentStyle } from './utils';
 import { TextPassThroughContext } from './context';
 const InlineText = (props) => {
     const inheritedText = useContext(TextPassThroughContext);
-    const style = extendObject({}, inheritedText?.textStyle, props.style);
-    const mergedProps = extendObject({}, inheritedText?.pendingTextProps, props, { style });
+    const mergedStyle = inheritedText?.textStyle
+        ? extendObject({}, inheritedText.textStyle)
+        : undefined;
+    // inline-text 只包裹裸文本，消费继承文本样式中的相对 lineHeight，不处理本地样式。
+    if (inheritedText?.textStyle) {
+        resolveTextLineHeightPercentStyle(mergedStyle, inheritedText.textStyle);
+    }
+    const mergedProps = inheritedText?.pendingTextProps
+        ? extendObject({}, inheritedText.pendingTextProps, props)
+        : props;
     const { allowFontScaling, children } = mergedProps;
     return createElement(Text, extendObject({}, mergedProps, {
-        allowFontScaling: allowFontScaling ?? getDefaultAllowFontScaling()
+        allowFontScaling: allowFontScaling ?? getDefaultAllowFontScaling(),
+        style: mergedStyle
     }), children);
 };
 InlineText.displayName = 'MpxInlineText';

package/lib/runtime/components/react/dist/mpx-input.d.ts

@@ -27,8 +27,6 @@ export interface InputProps {
     };
     'enable-offset'?: boolean;
     'enable-var'?: boolean;
-    'external-var-context'?: Record<string, any>;
-    'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;
     'keyboard-type'?: string;

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

@@ -52,7 +52,7 @@ const inputModeMap = {
     digit: 'decimal'
 };
 const Input = forwardRef((props, ref) => {
-    const { style = {}, allowFontScaling, type = 'text', value, password, 'placeholder-style': placeholderStyle = {}, disabled, maxlength = 140, 'cursor-spacing': cursorSpacing = 0, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'adjust-position': adjustPosition = true, 'keyboard-type': originalKeyboardType, 'hold-keyboard': holdKeyboard = false, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
+    const { style = {}, allowFontScaling, type = 'text', value, password, 'placeholder-style': placeholderStyle = {}, disabled, maxlength = 140, 'cursor-spacing': cursorSpacing = 0, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-var': enableVar, 'parent-width': parentWidth, 'parent-height': parentHeight, 'adjust-position': adjustPosition = true, 'keyboard-type': originalKeyboardType, 'hold-keyboard': holdKeyboard = false, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
     // private
     multiline, 'auto-height': autoHeight, bindlinechange } = props;
     const formContext = useContext(FormContext);
@@ -84,7 +84,7 @@ const Input = forwardRef((props, ref) => {
     const [contentHeight, setContentHeight] = useState(0);
     const [selection, setSelection] = useState({ start: -1, end: tmpValue.current.length });
     const styleObj = extendObject({ padding: 0, backgroundColor: '#fff' }, style, multiline && autoHeight ? { height: 'auto' } : {});
-    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, parentWidth, parentHeight });
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, {
         style: normalStyle
@@ -153,7 +153,7 @@ const Input = forwardRef((props, ref) => {
         // auto-focus/focus 不会触发而是在 useEffect 中初始化
         setKeyboardAvoidContext();
     };
-    const onTouchEnd = (evt) => {
+    const markEventOrigin = (evt) => {
         evt.nativeEvent.origin = 'input';
     };
     const onFocus = (evt) => {
@@ -286,7 +286,14 @@ const Input = forwardRef((props, ref) => {
     // React Native 的 TextInput 在 textAlign center + placeholder 时光标会跑到右边
     // 这个问题只在 Android 上出现
     // 参考：https://github.com/facebook/react-native/issues/28794 (Android only)
-    const needMultilineFix = isAndroid && !multiline;
+    const conditionalTextInputProps = {};
+    if (isAndroid && !multiline && props.placeholder && normalStyle.textAlign === 'center') {
+        conditionalTextInputProps.multiline = true;
+        conditionalTextInputProps.numberOfLines = 1;
+    }
+    if (!multiline || confirmType !== 'return') {
+        conditionalTextInputProps.enterKeyHint = confirmType;
+    }
     const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle),
@@ -301,20 +308,21 @@ const Input = forwardRef((props, ref) => {
         autoFocus: isAutoFocus,
         selection: selectionStart > -1 || typeof cursor === 'number' ? selection : undefined,
         selectionColor: cursorColor,
-        blurOnSubmit: multiline ? confirmType !== 'return' : !confirmHold,
+        submitBehavior: multiline ? (confirmType === 'return' ? 'newline' : 'blurAndSubmit') : (confirmHold ? 'submit' : 'blurAndSubmit'),
         underlineColorAndroid: 'rgba(0,0,0,0)',
         textAlignVertical: textAlignVertical,
         placeholderTextColor: placeholderStyle?.color,
-        multiline: multiline || needMultilineFix,
+        multiline,
         onTouchStart,
-        onTouchEnd,
+        onTouchEnd: markEventOrigin,
+        onTouchMove: markEventOrigin,
         onFocus,
         onBlur,
         onChange,
         onSelectionChange,
         onContentSizeChange,
         onSubmitEditing: bindconfirm && onSubmitEditing
-    }, needMultilineFix ? { numberOfLines: 1 } : {}, !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }), [
+    }, conditionalTextInputProps), [
         'name',
         'type',
         'maxlength',

package/lib/runtime/components/react/dist/mpx-label.d.ts

@@ -9,8 +9,7 @@ export interface LabelProps {
     style?: ViewStyle & Record<string, any>;
     'enable-offset'?: boolean;
     'enable-var'?: boolean;
-    'external-var-context'?: Record<string, any>;
-    'parent-font-size'?: number;
+    'enable-text-pass-through'?: boolean;
     'parent-width'?: number;
     'parent-height'?: number;
     children: ReactNode;

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

@@ -6,24 +6,23 @@ import { View } from 'react-native';
 import { noop, warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useTextPassThroughValue } from './utils';
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useTextPassThrough } from './utils';
 import { LabelContext } from './context';
 import Portal from './mpx-portal';
 const Label = forwardRef((labelProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(labelProps);
     const propsRef = useRef({});
-    const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { style = {}, 'enable-var': enableVar, 'enable-text-pass-through': enableTextPassThrough, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     propsRef.current = props;
     const defaultStyle = {
         flexDirection: 'row'
     };
-    const styleObj = extendObject({}, defaultStyle, style);
-    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentWidth, parentHeight, defaultStyle });
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, { style: normalStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle);
-    const textPassThrough = useTextPassThroughValue(textStyle, textProps);
+    const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough });
     if (backgroundStyle) {
         warn('Label does not support background image-related styles!');
     }
@@ -44,7 +43,7 @@ const Label = forwardRef((labelProps, ref) => {
     ], {
         layoutRef
     });
-    const finalComponent = createElement(View, innerProps, createElement(LabelContext.Provider, { value: contextRef }, wrapChildren(props, {
+    const finalComponent = createElement(View, innerProps, createElement(LabelContext.Provider, { value: contextRef }, wrapChildren(props.children, {
         hasVarDec,
         varContext: varContextRef.current,
         textPassThrough

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

@@ -11,8 +11,6 @@ interface MovableAreaProps {
     height?: number;
     'enable-offset'?: boolean;
     'enable-var'?: boolean;
-    'external-var-context'?: Record<string, any>;
-    'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;
 }

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

@@ -9,8 +9,8 @@ import { MovableAreaContext } from './context';
 import { useTransformStyle, wrapChildren, useLayout, extendObject } from './utils';
 import Portal from './mpx-portal';
 const _MovableArea = forwardRef((props, 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, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { style = {}, 'enable-var': enableVar, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentWidth, parentHeight });
     const movableViewRef = useRef(null);
     useNodesRef(props, ref, movableViewRef, {
         style: normalStyle
@@ -24,7 +24,7 @@ const _MovableArea = forwardRef((props, ref) => {
         style: extendObject({ height: contextValue.height, width: contextValue.width }, normalStyle, layoutStyle),
         ref: movableViewRef
     }), [], { layoutRef });
-    let movableComponent = createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(View, innerProps, wrapChildren(props, {
+    let movableComponent = createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(View, innerProps, wrapChildren(props.children, {
         hasVarDec,
         varContext: varContextRef.current
     })));

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

@@ -55,8 +55,7 @@ interface MovableViewProps {
     'simultaneous-handlers'?: Array<GestureHandler>;
     inertia?: boolean;
     'enable-var'?: boolean;
-    'external-var-context'?: Record<string, any>;
-    'parent-font-size'?: number;
+    'enable-text-pass-through'?: boolean;
     'parent-width'?: number;
     'parent-height'?: number;
     'disable-event-passthrough'?: boolean;