@mpxjs/webpack-plugin 2.10.14-beta.2 → 2.10.14-beta.20

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

@@ -0,0 +1,32 @@
+/**
+ * ✘ type
+ * ✘ canvas-id
+ * ✘ disable-scroll
+ * ✔ bindtouchstart
+ * ✔ bindtouchmove
+ * ✔ bindtouchend
+ * ✔ bindtouchcancel
+ * ✔ bindlongtap
+ * ✔ binderror
+ */
+import { TouchEvent } from 'react';
+import { View, NativeSyntheticEvent } from 'react-native';
+import { HandlerRef } from '../useNodesRef';
+import './CanvasGradient';
+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;
+    bindtouchcancel?: (event: NativeSyntheticEvent<TouchEvent>) => void;
+    bindlongtap?: (event: NativeSyntheticEvent<TouchEvent>) => void;
+    binderror?: (event: NativeSyntheticEvent<ErrorEvent>) => void;
+}
+declare const _Canvas: import("react").ForwardRefExoticComponent<CanvasProps & import("react").RefAttributes<HandlerRef<CanvasProps & View, CanvasProps>>>;
+export default _Canvas;

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

@@ -0,0 +1,52 @@
+/// <reference types="react" />
+import { WebView } from 'react-native-webview';
+import Bus from './Bus';
+export declare const WEBVIEW_TARGET = "@@WEBVIEW_TARGET";
+export declare const constructors: Record<string, any>;
+export declare const ID: () => string;
+export interface Instance {
+    postMessage: (...args: any[]) => void;
+    [WEBVIEW_TARGET]?: string;
+    [key: string]: any;
+}
+export interface WebviewConstructor {
+    new (...args: any[]): Instance;
+    constructLocally?: (...args: unknown[]) => Instance;
+}
+export interface WebviewMessage {
+    type: 'set' | 'exec' | 'listen' | 'event' | 'construct';
+    payload: {
+        target?: string | {
+            [key: string]: any;
+        };
+        key?: string;
+        value?: any;
+        method?: string;
+        args?: any[];
+        types?: string[];
+        type?: string;
+        constructor?: string | Function;
+        id?: string;
+    };
+}
+export interface CanvasInstance {
+    webview: WebView | null;
+    bus: Bus | null;
+    context2D: CanvasRenderingContext2D;
+    getContext: (contextType: string) => CanvasRenderingContext2D | null;
+    createImage: (width?: number, height?: number) => any;
+    postMessage: (message: WebviewMessage) => Promise<any>;
+    listeners: Array<(payload: any) => void>;
+    addMessageListener: (listener: (payload: any) => void) => () => void;
+    removeMessageListener: (listener: (payload: any) => void) => void;
+    createImageData: (dataArray: number[], width?: number, height?: number) => any;
+}
+export declare const registerWebviewTarget: (instance: Instance, targetName: string) => void;
+export declare const registerWebviewProperties: (instance: Instance, properties: Record<string, any>) => void;
+export declare const registerWebviewMethods: (instance: Instance, methods: string[]) => void;
+export declare const registerWebviewConstructor: (constructor: WebviewConstructor, constructorName: string) => void;
+export declare const useWebviewBinding: ({ targetName, properties, methods }: {
+    targetName: string;
+    properties?: Record<string, any> | undefined;
+    methods?: string[] | undefined;
+}) => import("react").MutableRefObject<{}>;

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

@@ -0,0 +1,20 @@
+/**
+ * ✔ bindchange
+ */
+import { ReactNode } from 'react';
+import { View, NativeSyntheticEvent, ViewStyle } from 'react-native';
+import { HandlerRef } from './useNodesRef';
+export interface CheckboxGroupProps {
+    name: string;
+    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;
+    bindchange?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+}
+declare const CheckboxGroup: import("react").ForwardRefExoticComponent<CheckboxGroupProps & import("react").RefAttributes<HandlerRef<View, CheckboxGroupProps>>>;
+export default CheckboxGroup;

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

@@ -0,0 +1,32 @@
+/**
+ * ✔ value
+ * ✔ disabled
+ * ✔ checked
+ * ✔ color
+ */
+import { ReactNode } from 'react';
+import { View, ViewStyle, NativeSyntheticEvent } from 'react-native';
+import { HandlerRef } from './useNodesRef';
+interface Selection {
+    value?: string;
+    checked?: boolean;
+}
+export interface CheckboxProps extends Selection {
+    disabled?: boolean;
+    color?: string;
+    style?: ViewStyle & Record<string, any>;
+    groupValue?: Array<string>;
+    'enable-offset'?: boolean;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    children?: ReactNode;
+    bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+    _onChange?: (evt: NativeSyntheticEvent<TouchEvent> | unknown, { checked }: {
+        checked: boolean;
+    }) => void;
+}
+declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HandlerRef<View, CheckboxProps>>>;
+export default Checkbox;

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

@@ -0,0 +1,27 @@
+/**
+ * ✘ report-submit
+ * ✘ report-submit-timeout
+ * ✔ bindsubmit
+ * ✔ bindreset
+ */
+import { View } from 'react-native';
+import { ReactNode } from 'react';
+import { HandlerRef } from './useNodesRef';
+interface FormProps {
+    style?: Record<string, any>;
+    children?: ReactNode;
+    'enable-offset'?: boolean;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    bindsubmit?: (evt: {
+        detail: {
+            value: any;
+        };
+    }) => void;
+    bindreset?: () => void;
+}
+declare const _Form: import("react").ForwardRefExoticComponent<FormProps & import("react").RefAttributes<HandlerRef<View, FormProps>>>;
+export default _Form;

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { Text, TextStyle } from 'react-native';
+import { HandlerRef } from '../useNodesRef';
+export type IconType = 'success' | 'success_no_circle' | 'info' | 'warn' | 'waiting' | 'cancel' | 'download' | 'search' | 'clear';
+export interface IconProps {
+    type: IconType;
+    size?: number;
+    color?: string;
+    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;
+}
+declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<HandlerRef<Text, IconProps>>>;
+export default Icon;

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { Image as RNImage, ImageStyle, NativeSyntheticEvent, ImageErrorEventData, ImageLoadEventData } from 'react-native';
+import { HandlerRef } from './useNodesRef';
+export type Mode = 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right';
+export interface ImageProps {
+    src?: string;
+    mode?: Mode;
+    svg?: boolean;
+    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;
+    bindload?: (evt: NativeSyntheticEvent<ImageLoadEventData> | unknown) => void;
+    binderror?: (evt: NativeSyntheticEvent<ImageErrorEventData> | unknown) => void;
+}
+declare const Image: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HandlerRef<RNImage, ImageProps>>>;
+export default Image;

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

@@ -0,0 +1,7 @@
+import { TextProps } from 'react-native';
+import { JSX } from 'react';
+declare const InlineText: {
+    (props: TextProps): JSX.Element;
+    displayName: string;
+};
+export default InlineText;

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

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import { TextInput, TextStyle, ViewStyle, NativeSyntheticEvent, TextInputTextInputEventData, TextInputKeyPressEventData, TextInputContentSizeChangeEventData, FlexStyle, TextInputSelectionChangeEventData, TextInputFocusEventData, TextInputSubmitEditingEventData } from 'react-native';
+import { HandlerRef } from './useNodesRef';
+type InputStyle = Omit<TextStyle & ViewStyle & Pick<FlexStyle, 'minHeight'>, 'borderLeftWidth' | 'borderTopWidth' | 'borderRightWidth' | 'borderBottomWidth' | 'borderTopLeftRadius' | 'borderTopRightRadius' | 'borderBottomRightRadius' | 'borderBottomLeftRadius'>;
+type Type = 'text' | 'number' | 'idcard' | 'digit';
+type ConfirmType = 'done' | 'send' | 'search' | 'next' | 'go' | 'return';
+export interface InputProps {
+    name?: string;
+    style?: InputStyle & Record<string, any>;
+    value?: string | number;
+    type?: Type;
+    password?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    'cursor-spacing'?: number;
+    maxlength?: number;
+    'auto-focus'?: boolean;
+    focus?: boolean;
+    'confirm-type'?: ConfirmType;
+    'confirm-hold'?: boolean;
+    cursor?: number;
+    'cursor-color'?: string;
+    'selection-start'?: number;
+    'selection-end'?: number;
+    'placeholder-style'?: {
+        color?: string;
+    };
+    '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;
+    'adjust-position': boolean;
+    bindinput?: (evt: NativeSyntheticEvent<TextInputTextInputEventData> | unknown) => void;
+    bindfocus?: (evt: NativeSyntheticEvent<TextInputFocusEventData> | unknown) => void;
+    bindblur?: (evt: NativeSyntheticEvent<TextInputFocusEventData> | unknown) => void;
+    bindconfirm?: (evt: NativeSyntheticEvent<TextInputSubmitEditingEventData | TextInputKeyPressEventData> | unknown) => void;
+    bindselectionchange?: (evt: NativeSyntheticEvent<TextInputSelectionChangeEventData> | unknown) => void;
+}
+export interface PrivateInputProps {
+    allowFontScaling?: boolean;
+    multiline?: boolean;
+    'auto-height'?: boolean;
+    bindlinechange?: (evt: NativeSyntheticEvent<TextInputContentSizeChangeEventData> | unknown) => void;
+}
+type FinalInputProps = InputProps & PrivateInputProps;
+declare const Input: import("react").ForwardRefExoticComponent<InputProps & PrivateInputProps & import("react").RefAttributes<HandlerRef<TextInput, FinalInputProps>>>;
+export default Input;

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

@@ -40,19 +40,19 @@
 import { forwardRef, useRef, useState, useContext, useEffect, createElement } from 'react';
 import { TextInput } from 'react-native';
 import { warn } from '@mpxjs/utils';
-import { useUpdateEffect, useTransformStyle, useLayout, extendObject, isIOS } from './utils';
+import { useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { FormContext, KeyboardAvoidContext } from './context';
 import Portal from './mpx-portal';
-const keyboardTypeMap = {
-    text: 'default',
+const inputModeMap = {
+    text: 'text',
     number: 'numeric',
-    idcard: 'default',
-    digit: isIOS ? 'decimal-pad' : 'numeric'
+    idcard: 'text',
+    digit: 'decimal'
 };
 const Input = forwardRef((props, ref) => {
-    const { style = {}, allowFontScaling = false, 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, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
+    const { style = {}, allowFontScaling = false, 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, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
     // private
     multiline, 'auto-height': autoHeight, bindlinechange } = props;
     const formContext = useContext(FormContext);
@@ -72,7 +72,6 @@ const Input = forwardRef((props, ref) => {
             return value + '';
         return '';
     };
-    const keyboardType = keyboardTypeMap[type];
     const defaultValue = parseValue(value);
     const textAlignVertical = multiline ? 'top' : 'auto';
     const tmpValue = useRef(defaultValue);
@@ -144,8 +143,8 @@ const Input = forwardRef((props, ref) => {
         }
     };
     const setKeyboardAvoidContext = () => {
-        if (adjustPosition && keyboardAvoid) {
-            keyboardAvoid.current = { cursorSpacing, ref: nodeRef };
+        if (keyboardAvoid) {
+            keyboardAvoid.current = { cursorSpacing, ref: nodeRef, adjustPosition, readyToShow: true };
         }
     };
     const onTouchStart = () => {
@@ -156,13 +155,32 @@ const Input = forwardRef((props, ref) => {
         evt.nativeEvent.origin = 'input';
     };
     const onFocus = (evt) => {
-        setKeyboardAvoidContext();
-        bindfocus && bindfocus(getCustomEvent('focus', evt, {
-            detail: {
-                value: tmpValue.current || ''
-            },
-            layoutRef
-        }, props));
+        if (!keyboardAvoid?.current) {
+            setKeyboardAvoidContext();
+        }
+        if (keyboardAvoid?.current) {
+            const focusAction = () => {
+                bindfocus?.(getCustomEvent('focus', evt, {
+                    detail: {
+                        value: tmpValue.current || '',
+                        height: keyboardAvoid.current?.keyboardHeight
+                    },
+                    layoutRef
+                }, props));
+                if (keyboardAvoid.current?.onKeyboardShow) {
+                    keyboardAvoid.current.onKeyboardShow = undefined;
+                }
+            };
+            if (keyboardAvoid.current.keyboardHeight) {
+                // iOS: keyboard 获取高度时机 keyboardWillShow 在 input focus 之前，可以立即执行
+                focusAction();
+            }
+            else {
+                // Android,Harmony: keyboard 获取高度时机 keyboardDidShow 在 input focus 之后，需要延迟回调
+                evt.persist();
+                keyboardAvoid.current.onKeyboardShow = focusAction;
+            }
+        }
     };
     const onBlur = (evt) => {
         bindblur && bindblur(getCustomEvent('blur', evt, {
@@ -252,7 +270,8 @@ const Input = forwardRef((props, ref) => {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle),
         allowFontScaling,
-        keyboardType: keyboardType,
+        inputMode: originalKeyboardType ? undefined : inputModeMap[type],
+        keyboardType: originalKeyboardType,
         secureTextEntry: !!password,
         defaultValue: defaultValue,
         value: inputValue,
@@ -261,7 +280,7 @@ const Input = forwardRef((props, ref) => {
         autoFocus: !!autoFocus || !!focus,
         selection: selectionStart > -1 || typeof cursor === 'number' ? selection : undefined,
         selectionColor: cursorColor,
-        blurOnSubmit: !multiline && !confirmHold,
+        blurOnSubmit: multiline ? confirmType !== 'return' : !confirmHold,
         underlineColorAndroid: 'rgba(0,0,0,0)',
         textAlignVertical: textAlignVertical,
         placeholderTextColor: placeholderStyle?.color,
@@ -273,7 +292,7 @@ const Input = forwardRef((props, ref) => {
         onChange,
         onSelectionChange,
         onContentSizeChange,
-        onSubmitEditing: bindconfirm && !multiline && onSubmitEditing
+        onSubmitEditing: bindconfirm && onSubmitEditing
     }, !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }), [
         'type',
         'password',

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

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+type KeyboardAvoidViewProps = {
+    children?: ReactNode;
+    style?: ViewStyle;
+    contentContainerStyle?: ViewStyle;
+};
+declare const KeyboardAvoidingView: {
+    ({ children, style, contentContainerStyle }: KeyboardAvoidViewProps): React.JSX.Element;
+    displayName: string;
+};
+export default KeyboardAvoidingView;

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

@@ -1,22 +1,44 @@
-import React, { useContext, useEffect } from 'react';
+/* eslint-disable space-before-function-paren */
+import React, { useContext, useEffect, useRef } from 'react';
 import { Keyboard, View } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, cancelAnimation } from 'react-native-reanimated';
 import { KeyboardAvoidContext } from './context';
-import { isIOS } from './utils';
+import { isAndroid, isIOS } from './utils';
 const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
     const duration = isIOS ? 250 : 300;
     const easing = isIOS ? Easing.inOut(Easing.ease) : Easing.out(Easing.quad);
     const offset = useSharedValue(0);
     const basic = useSharedValue('auto');
     const keyboardAvoid = useContext(KeyboardAvoidContext);
+    // fix: 某些特殊机型下隐藏键盘可能会先触发一次 keyboardWillShow，
+    // 比如机型 iPhone 11 Pro，可能会导致显隐动画冲突
+    // 因此增加状态标记 + clearTimeout + cancelAnimation 来优化
+    const isShow = useRef(false);
+    const timerRef = useRef(null);
+    const keybaordHandleTimerRef = useRef(null);
     const animatedStyle = useAnimatedStyle(() => ({
+        // translate/position top可能会导致底部渲染区域缺失(需要 android 配置聚焦时禁用高度缩小)，margin-top 会导致 portal 的定位失效，无法顶起 portal
         transform: [{ translateY: -offset.value }],
         flexBasis: basic.value
     }));
     const resetKeyboard = () => {
+        if (!isShow.current) {
+            return;
+        }
+        isShow.current = false;
+        timerRef.current && clearTimeout(timerRef.current);
         if (keyboardAvoid?.current) {
-            keyboardAvoid.current = null;
+            const inputRef = keyboardAvoid.current.ref?.current;
+            if (inputRef && inputRef.isFocused() && !keyboardAvoid.current.readyToShow) {
+                // 修复 Android 点击键盘收起按钮时当前 input 没触发失焦的问题
+                // keyboardAvoid.current.readyToShow = true 表示聚焦到了新的输入框，不需要手动触发失焦
+                inputRef.blur();
+            }
+            if (!keyboardAvoid.current.onKeyboardShow) {
+                keyboardAvoid.current = null;
+            }
         }
+        cancelAnimation(offset);
         offset.value = withTiming(0, { duration, easing });
         basic.value = 'auto';
     };
@@ -27,66 +49,77 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
     };
     useEffect(() => {
         let subscriptions = [];
-        if (isIOS) {
-            subscriptions = [
-                Keyboard.addListener('keyboardWillShow', (evt) => {
-                    if (!keyboardAvoid?.current)
-                        return;
-                    const { endCoordinates } = evt;
-                    const { ref, cursorSpacing = 0 } = keyboardAvoid.current;
-                    setTimeout(() => {
-                        ref?.current?.measure((x, y, width, height, pageX, pageY) => {
+        // iphone 16 pro & iphone 其它 pro 上长按可能会触发两次 keyboard show 事件，第一次键盘高度错误，第二次正确，因此不能用节流、仅首次生效等操作控制 show 事件
+        function keybaordAvoding(evt, ios = false) {
+            if (keyboardAvoid?.current?.readyToShow) {
+                // 重置标记位
+                keyboardAvoid.current.readyToShow = false;
+            }
+            if (!keyboardAvoid?.current) {
+                return;
+            }
+            isShow.current = true;
+            if (ios) {
+                timerRef.current && clearTimeout(timerRef.current);
+            }
+            const { endCoordinates } = evt;
+            const { ref, cursorSpacing = 0, adjustPosition, onKeyboardShow } = keyboardAvoid.current;
+            keyboardAvoid.current.keyboardHeight = endCoordinates.height;
+            onKeyboardShow?.();
+            if (adjustPosition) {
+                // 默认沿用旧版本逻辑，在 android 原生关闭键盘避让的情况下应该将该配置设置为 false，走 mpx 的键盘避让逻辑，否则bundle内的所有input都会无法避让键盘
+                const enableNativeKeyboardAvoiding = mpxGlobal?.__mpx?.config?.rnConfig?.enableNativeKeyboardAvoiding ?? true;
+                const callback = () => {
+                    ref?.current?.measure((x, y, width, height, pageX, pageY) => {
+                        function calculateOffset() {
+                            // enableNativeKeyboardAvoding 默认开启
+                            if (enableNativeKeyboardAvoiding && isAndroid) {
+                                const aboveOffset = pageY + height - endCoordinates.screenY;
+                                const belowOffset = endCoordinates.height - aboveOffset;
+                                const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
+                                const belowValue = Math.min(belowOffset, cursorSpacing);
+                                return aboveOffset > 0 ? belowValue : aboveValue;
+                            }
                             const aboveOffset = offset.value + pageY + height - endCoordinates.screenY;
                             const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
                             const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing);
-                            const value = aboveOffset > 0 ? belowValue : aboveValue;
-                            offset.value = withTiming(value, { duration, easing }, (finished) => {
-                                if (finished) {
-                                    // Set flexBasic after animation to trigger re-layout and reset layout information
-                                    basic.value = '99.99%';
-                                }
-                            });
-                        });
-                    });
-                }),
-                Keyboard.addListener('keyboardWillHide', resetKeyboard)
-            ];
-        }
-        else {
-            subscriptions = [
-                Keyboard.addListener('keyboardDidShow', (evt) => {
-                    if (!keyboardAvoid?.current)
-                        return;
-                    const { endCoordinates } = evt;
-                    const { ref, cursorSpacing = 0 } = keyboardAvoid.current;
-                    ref?.current?.measure((x, y, width, height, pageX, pageY) => {
-                        const aboveOffset = pageY + height - endCoordinates.screenY;
-                        const belowOffset = endCoordinates.height - aboveOffset;
-                        const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
-                        const belowValue = Math.min(belowOffset, cursorSpacing);
-                        const value = aboveOffset > 0 ? belowValue : aboveValue;
-                        offset.value = withTiming(value, { duration, easing }, (finished) => {
+                            return aboveOffset > 0 ? belowValue : aboveValue;
+                        }
+                        cancelAnimation(offset);
+                        offset.value = withTiming(calculateOffset(), { duration, easing }, finished => {
                             if (finished) {
                                 // Set flexBasic after animation to trigger re-layout and reset layout information
                                 basic.value = '99.99%';
                             }
                         });
                     });
+                };
+                (isIOS ? () => (timerRef.current = setTimeout(callback)) : callback)();
+            }
+        }
+        if (isIOS) {
+            subscriptions = [
+                Keyboard.addListener('keyboardWillShow', (evt) => {
+                    if (keybaordHandleTimerRef.current) {
+                        clearTimeout(keybaordHandleTimerRef.current);
+                    }
+                    // iphone 在input聚焦时长按滑动后会导致 show 事件先于 focus 事件发生，因此等一下，等 focus 先触发拿到 input，避免键盘出现但input没顶上去
+                    keybaordHandleTimerRef.current = setTimeout(() => keybaordAvoding(evt, true), 32);
                 }),
-                Keyboard.addListener('keyboardDidHide', resetKeyboard)
+                Keyboard.addListener('keyboardWillHide', resetKeyboard)
             ];
         }
+        else {
+            subscriptions = [Keyboard.addListener('keyboardDidShow', keybaordAvoding), Keyboard.addListener('keyboardDidHide', resetKeyboard)];
+        }
         return () => {
             subscriptions.forEach(subscription => subscription.remove());
+            timerRef.current && clearTimeout(timerRef.current);
+            keybaordHandleTimerRef.current && clearTimeout(keybaordHandleTimerRef.current);
         };
     }, [keyboardAvoid]);
-    return (<View style={style} onTouchEnd={onTouchEnd}>
-      <Animated.View style={[
-            contentContainerStyle,
-            animatedStyle
-        ]}>
-        {children}
-      </Animated.View>
+    return (<View style={style} onTouchEnd={onTouchEnd} onTouchMove={onTouchEnd}>
+      <Animated.View style={[contentContainerStyle, animatedStyle]}>{children}</Animated.View>
     </View>);
 };
 KeyboardAvoidingView.displayName = 'MpxKeyboardAvoidingView';

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

@@ -0,0 +1,20 @@
+/**
+ * ✘ for
+ */
+import { ReactNode } from 'react';
+import { View, ViewStyle, NativeSyntheticEvent } from 'react-native';
+import { HandlerRef } from './useNodesRef';
+export interface LabelProps {
+    for?: string;
+    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;
+    bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+}
+declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HandlerRef<View, LabelProps>>>;
+export default Label;

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

@@ -0,0 +1,20 @@
+/**
+ * ✘ scale-area
+ */
+import { View } from 'react-native';
+import { ReactNode } from 'react';
+import { HandlerRef } from './useNodesRef';
+interface MovableAreaProps {
+    style?: Record<string, any>;
+    children: ReactNode;
+    width?: number;
+    height?: number;
+    'enable-offset'?: boolean;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+}
+declare const _MovableArea: import("react").ForwardRefExoticComponent<MovableAreaProps & import("react").RefAttributes<HandlerRef<View, MovableAreaProps>>>;
+export default _MovableArea;