@mpxjs/webpack-plugin 2.10.4 → 2.10.5

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

@@ -79,7 +79,7 @@ const Input = forwardRef((props, ref) => {
     const lineCount = useRef(0);
     const [inputValue, setInputValue] = useState(defaultValue);
     const [contentHeight, setContentHeight] = useState(0);
-    const [selection, setSelection] = useState({ start: -1, end: -1 });
+    const [selection, setSelection] = useState({ start: -1, end: tmpValue.current.length });
     const styleObj = extendObject({ padding: 0, backgroundColor: '#fff' }, style, multiline && autoHeight
         ? { height: 'auto', minHeight: Math.max(style?.minHeight || 35, contentHeight) }
         : {});
@@ -91,15 +91,17 @@ const Input = forwardRef((props, ref) => {
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     useEffect(() => {
         if (inputValue !== value) {
-            setInputValue(parseValue(value));
+            const parsed = parseValue(value);
+            tmpValue.current = parsed;
+            setInputValue(parsed);
         }
     }, [value]);
     useEffect(() => {
-        if (typeof cursor === 'number') {
-            setSelection({ start: cursor, end: cursor });
+        if (selectionStart > -1) {
+            setSelection({ start: selectionStart, end: selectionEnd === -1 ? tmpValue.current.length : selectionEnd });
         }
-        else if (selectionStart >= 0 && selectionEnd >= 0 && selectionStart !== selectionEnd) {
-            setSelection({ start: selectionStart, end: selectionEnd });
+        else if (typeof cursor === 'number') {
+            setSelection({ start: cursor, end: cursor });
         }
     }, [cursor, selectionStart, selectionEnd]);
     // have not selection on the Android platformg
@@ -149,6 +151,9 @@ const Input = forwardRef((props, ref) => {
         // sometimes the focus event occurs later than the keyboardWillShow event
         setKeyboardAvoidContext();
     };
+    const onTouchEnd = (evt) => {
+        evt.nativeEvent.origin = 'input';
+    };
     const onFocus = (evt) => {
         setKeyboardAvoidContext();
         bindfocus && bindfocus(getCustomEvent('focus', evt, {
@@ -208,6 +213,7 @@ const Input = forwardRef((props, ref) => {
         }
     };
     const resetValue = () => {
+        tmpValue.current = '';
         setInputValue('');
     };
     const getValue = () => {
@@ -241,7 +247,7 @@ const Input = forwardRef((props, ref) => {
             ? nodeRef.current?.focus()
             : nodeRef.current?.blur();
     }, [focus]);
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle),
         allowFontScaling,
@@ -252,22 +258,22 @@ const Input = forwardRef((props, ref) => {
         maxLength: maxlength === -1 ? undefined : maxlength,
         editable: !disabled,
         autoFocus: !!autoFocus || !!focus,
-        selection: selection,
+        selection: selectionStart > -1 || typeof cursor === 'number' ? selection : undefined,
         selectionColor: cursorColor,
         blurOnSubmit: !multiline && !confirmHold,
         underlineColorAndroid: 'rgba(0,0,0,0)',
         textAlignVertical: textAlignVertical,
         placeholderTextColor: placeholderStyle?.color,
-        multiline: !!multiline
-    }, !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }, layoutProps, {
+        multiline: !!multiline,
         onTouchStart,
+        onTouchEnd,
         onFocus,
         onBlur,
         onChange,
         onSelectionChange,
         onContentSizeChange,
         onSubmitEditing: bindconfirm && !multiline && onSubmitEditing
-    }), [
+    }, !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }), [
         'type',
         'password',
         'placeholder-style',

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

@@ -1,7 +1,6 @@
-import React, { useContext, useEffect, useMemo } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { Keyboard, View } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
-import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import { KeyboardAvoidContext } from './context';
 import { isIOS } from './utils';
 const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
@@ -10,20 +9,10 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
     const offset = useSharedValue(0);
     const basic = useSharedValue('auto');
     const keyboardAvoid = useContext(KeyboardAvoidContext);
-    const dismiss = () => {
-        Keyboard.isVisible() && Keyboard.dismiss();
-    };
-    const gesture = useMemo(() => {
-        return Gesture.Tap()
-            .onEnd(() => {
-            dismiss();
-        }).runOnJS(true);
-    }, []);
-    const animatedStyle = useAnimatedStyle(() => {
-        return Object.assign({
-            transform: [{ translateY: -offset.value }]
-        }, isIOS ? {} : { flexBasis: basic.value });
-    });
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: -offset.value }],
+        flexBasis: basic.value
+    }));
     const resetKeyboard = () => {
         if (keyboardAvoid?.current) {
             keyboardAvoid.current = null;
@@ -31,6 +20,11 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
         offset.value = withTiming(0, { duration, easing });
         basic.value = 'auto';
     };
+    const onTouchEnd = ({ nativeEvent }) => {
+        if (nativeEvent.origin !== 'input') {
+            Keyboard.isVisible() && Keyboard.dismiss();
+        }
+    };
     useEffect(() => {
         let subscriptions = [];
         if (isIOS) {
@@ -46,7 +40,12 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
                             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 });
+                            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%';
+                                }
+                            });
                         });
                     });
                 }),
@@ -68,11 +67,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
                         const value = aboveOffset > 0 ? belowValue : aboveValue;
                         offset.value = withTiming(value, { duration, easing }, (finished) => {
                             if (finished) {
-                                /**
-                                 * In the Android environment, the layout information is not synchronized after the animation,
-                                 * which results in the inability to correctly trigger element events.
-                                 * Here, we utilize flexBasic to proactively trigger a re-layout
-                                 */
+                                // Set flexBasic after animation to trigger re-layout and reset layout information
                                 basic.value = '99.99%';
                             }
                         });
@@ -85,16 +80,14 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
             subscriptions.forEach(subscription => subscription.remove());
         };
     }, [keyboardAvoid]);
-    return (<GestureDetector gesture={gesture}>
-      <View style={style}>
-        <Animated.View style={[
+    return (<View style={style} onTouchEnd={onTouchEnd}>
+      <Animated.View style={[
             contentContainerStyle,
             animatedStyle
         ]}>
-          {children}
-        </Animated.View>
-      </View>
-    </GestureDetector>);
+        {children}
+      </Animated.View>
+    </View>);
 };
 KeyboardAvoidingView.displayName = 'MpxKeyboardAvoidingView';
 export default KeyboardAvoidingView;

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

@@ -33,10 +33,9 @@ const Label = forwardRef((labelProps, ref) => {
         bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, { props: propsRef.current }));
         contextRef.current.triggerChange(evt);
     }, []);
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
-        style: extendObject({}, innerStyle, layoutStyle)
-    }, layoutProps, {
+        style: extendObject({}, innerStyle, layoutStyle),
         bindtap: onTap
     }), [], {
         layoutRef

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

@@ -19,10 +19,10 @@ const _MovableArea = forwardRef((props, ref) => {
         width: normalStyle.width || 10
     }), [normalStyle.width, normalStyle.height]);
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef });
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         style: extendObject({ height: contextValue.height, width: contextValue.width, overflow: 'hidden' }, normalStyle, layoutStyle),
         ref: movableViewRef
-    }, layoutProps), [], { layoutRef });
+    }), [], { layoutRef });
     return createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(View, innerProps, wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current

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

@@ -452,7 +452,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         'catchhtouchmove',
         'catchtouchend'
     ]);
-    const innerProps = useInnerProps(filterProps, extendObject({
+    const innerProps = useInnerProps(extendObject({}, filterProps, {
         ref: nodeRef,
         onLayout: onLayout,
         style: [innerStyle, animatedStyles, layoutStyle]

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

@@ -1,5 +1,13 @@
+/**
+ * ✔ hover-class
+ * ✘ hover-stop-propagation
+ * ✔ hover-start-time
+ * ✔ hover-stay-time
+ * ✔ open-type
+ * ✔ url
+ * ✔ delta
+ */
 import { useCallback, forwardRef, createElement } from 'react';
-import useInnerProps from './getInnerListeners';
 import { redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy';
 import MpxView from './mpx-view';
 const _Navigator = forwardRef((props, ref) => {
@@ -23,10 +31,10 @@ const _Navigator = forwardRef((props, ref) => {
                 break;
         }
     }, [openType, url, delta]);
-    const innerProps = useInnerProps(props, {
+    const innerProps = {
         ref,
         bindtap: handleClick
-    });
+    };
     return createElement(MpxView, innerProps, children);
 });
 _Navigator.displayName = 'MpxNavigator';

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

@@ -114,9 +114,9 @@ const Picker = forwardRef((props, ref) => {
     const pickerRef = useRef(null);
     const { open, show, hide, remove } = useRef(createPopupManager()).current;
     useNodesRef(props, ref, nodeRef);
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(extendObject({}, props, {
         ref: nodeRef
-    }, [], { layoutRef: innerLayout });
+    }), [], { layoutRef: innerLayout });
     const getInnerLayout = (layout) => {
         innerLayout.current = layout.current;
     };

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

@@ -47,13 +47,12 @@ const _PickerView = forwardRef((props, ref) => {
             snapActiveValueRef.current = value.slice();
         }
     };
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle, {
             position: 'relative',
             overflow: 'hidden'
-        }),
-        layoutProps
+        })
     }), [
         'enable-offset',
         'indicator-style',

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

@@ -1,7 +1,7 @@
 import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Reanimated, { useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated';
-import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS } from '../utils';
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS, isHarmony } from '../utils';
 import useNodesRef from '../useNodesRef';
 import PickerIndicator from './pickerViewIndicator';
 import PickerMask from './pickerViewMask';
@@ -143,9 +143,9 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     }, [itemRawH]);
     const onScrollEndDrag = useCallback((e) => {
         dragging.current = false;
-        if (isIOS) {
+        if (!isAndroid) {
             const { y } = e.nativeEvent.contentOffset;
-            if (y % itemRawH === 0) {
+            if (y % itemRawH === 0 || (isHarmony && y > snapToOffsets[maxIndex])) {
                 onMomentumScrollEnd({ nativeEvent: { contentOffset: { y } } });
             }
             else if (y > 0 && y < snapToOffsets[maxIndex]) {
@@ -221,7 +221,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     });
     const renderScollView = () => {
         return (<PickerViewColumnAnimationContext.Provider value={offsetYShared}>
-        <Reanimated.ScrollView ref={scrollViewRef} bounces={true} horizontal={false} nestedScrollEnabled={true} removeClippedSubviews={false} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} scrollEventThrottle={16} {...layoutProps} onTouchStart={onClickOnceItem} style={[{ width: '100%' }]} decelerationRate="fast" snapToOffsets={snapToOffsets} onScroll={onScroll} onScrollBeginDrag={onScrollBeginDrag} onScrollEndDrag={onScrollEndDrag} onMomentumScrollBegin={onMomentumScrollBegin} onMomentumScrollEnd={onMomentumScrollEnd} onContentSizeChange={onContentSizeChange} contentContainerStyle={contentContainerStyle}>
+        <Reanimated.ScrollView ref={scrollViewRef} bounces={true} horizontal={false} nestedScrollEnabled={true} removeClippedSubviews={false} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} scrollEventThrottle={16} {...layoutProps} onTouchEnd={onClickOnceItem} style={[{ width: '100%' }]} decelerationRate="fast" snapToOffsets={snapToOffsets} onScroll={onScroll} onScrollBeginDrag={onScrollBeginDrag} onScrollEndDrag={onScrollEndDrag} onMomentumScrollBegin={onMomentumScrollBegin} onMomentumScrollEnd={onMomentumScrollEnd} onContentSizeChange={onContentSizeChange} contentContainerStyle={contentContainerStyle}>
           {renderInnerchild()}
         </Reanimated.ScrollView>
       </PickerViewColumnAnimationContext.Provider>);

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

@@ -71,10 +71,10 @@ const radioGroup = forwardRef((props, ref) => {
             notifyChange
         };
     }, []);
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle)
-    }, layoutProps), ['name'], {
+    }), ['name'], {
         layoutRef
     });
     return createElement(View, innerProps, createElement(RadioGroupContext.Provider, { value: contextValue }, wrapChildren(props, {

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

@@ -91,10 +91,9 @@ const Radio = forwardRef((radioProps, ref) => {
     if (labelContext) {
         labelContext.current.triggerChange = onChange;
     }
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
-        style: extendObject({}, innerStyle, layoutStyle)
-    }, layoutProps, {
+        style: extendObject({}, innerStyle, layoutStyle),
         bindtap: !disabled && onTap
     }), [
         'value',

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

@@ -44,10 +44,10 @@ const _RichText = forwardRef((props, ref) => {
     useNodesRef(props, ref, nodeRef, {
         layoutRef
     });
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: extendObject(normalStyle, layoutStyle)
-    }, layoutProps), [], {
+    }), [], {
         layoutRef
     });
     const html = typeof nodes === 'string' ? nodes : jsonToHtmlStr(nodes);

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

@@ -491,7 +491,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             pagingEnabled
         });
     }
-    const innerProps = useInnerProps(props, scrollAdditionalProps, [
+    const innerProps = useInnerProps(extendObject({}, props, scrollAdditionalProps), [
         'id',
         'scroll-x',
         'scroll-y',

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

@@ -1,11 +1,12 @@
 import { Text } from 'react-native';
 import { createElement } from 'react';
 import useInnerProps from './getInnerListeners';
+import { extendObject } from './utils';
 const SimpleText = (props) => {
     const { allowFontScaling = false, children } = props;
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(extendObject({}, props, {
         allowFontScaling
-    }, []);
+    }));
     return createElement(Text, innerProps, children);
 };
 SimpleText.displayName = 'MpxSimpleText';

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

@@ -1,13 +1,13 @@
 import { View } from 'react-native';
 import { createElement } from 'react';
-import { splitProps, splitStyle, wrapChildren } from './utils';
+import { splitProps, splitStyle, wrapChildren, extendObject } from './utils';
 import useInnerProps from './getInnerListeners';
 const SimpleView = (simpleViewProps) => {
     const { textProps, innerProps: props = {} } = splitProps(simpleViewProps);
     const { textStyle, innerStyle = {} } = splitStyle(props.style || {});
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(extendObject({}, props, {
         style: innerStyle
-    }, []);
+    }));
     return createElement(View, innerProps, wrapChildren(props, {
         hasVarDec: false,
         textStyle: textStyle,

package/lib/runtime/components/react/dist/mpx-swiper-item.jsx

@@ -2,7 +2,7 @@ import Animated, { useAnimatedStyle, interpolate } from 'react-native-reanimated
 import { forwardRef, useRef, useContext } from 'react';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils';
+import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, extendObject } from './utils';
 import { SwiperContext } from './context';
 const _SwiperItem = forwardRef((props, ref) => {
     const { 'enable-var': enableVar, 'external-var-context': externalVarContext, style, customStyle, itemIndex } = props;
@@ -21,10 +21,9 @@ const _SwiperItem = forwardRef((props, ref) => {
     const { 
     // 存储layout布局信息
     layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef });
-    const innerProps = useInnerProps(props, {
-        ref: nodeRef,
-        ...layoutProps
-    }, [
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
+        ref: nodeRef
+    }), [
         'children',
         'enable-offset',
         'style'

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

@@ -4,7 +4,7 @@ import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS
 import React, { forwardRef, useRef, useEffect, useMemo } from 'react';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren } from './utils';
+import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject } from './utils';
 import { SwiperContext } from './context';
 /**
  * 默认的Style类型
@@ -124,9 +124,9 @@ const SwiperWrapper = forwardRef((props, ref) => {
     const { 
     // 存储layout布局信息
     layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef, onLayout: onWrapperLayout });
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(extendObject({}, props, {
         ref: nodeRef
-    }, [
+    }), [
         'style',
         'indicator-dots',
         'indicator-color',
@@ -187,8 +187,8 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 dotAnimatedStyle
             ]}/>
           {dots}
-      </View>
-    </View>);
+        </View>
+      </View>);
     }
     function renderItems() {
         const intLen = children.length;
@@ -641,12 +641,12 @@ const SwiperWrapper = forwardRef((props, ref) => {
     function renderSwiper() {
         const arrPages = renderItems();
         return (<View style={[normalStyle, layoutStyle, styles.swiper]} {...layoutProps} {...innerProps}>
-        <Animated.View style={[{
+      <Animated.View style={[{
                     flexDirection: dir === 'x' ? 'row' : 'column',
                     width: '100%',
                     height: '100%'
                 }, animatedStyles]}>
-          {wrapChildren({
+        {wrapChildren({
                 children: arrPages
             }, {
                 hasVarDec,
@@ -654,8 +654,8 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 textStyle,
                 textProps
             })}
-        </Animated.View>
-        {showsPagination && renderPagination()}
+      </Animated.View>
+      {showsPagination && renderPagination()}
     </View>);
     }
     if (children.length === 1) {

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

@@ -67,17 +67,15 @@ const _Switch = forwardRef((props, ref) => {
             }
         };
     }, []);
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle)
-    }, layoutProps, !disabled ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {}), [
+    }, !disabled ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {}), [
         'checked',
         'disabled',
         'type',
         'color'
-    ], {
-        layoutRef
-    });
+    ], { layoutRef });
     if (type === 'checkbox') {
         return createElement(CheckBox, extendObject({}, innerProps, {
             color: color,

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

@@ -7,10 +7,9 @@ import { Text } from 'react-native';
 import { useRef, forwardRef, createElement } from 'react';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { useTransformStyle, wrapChildren } from './utils';
+import { useTransformStyle, wrapChildren, extendObject } from './utils';
 const _Text = forwardRef((props, ref) => {
     const { style = {}, allowFontScaling = false, selectable, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'user-select': userSelect, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
-    const layoutRef = useRef({});
     const { normalStyle, hasVarDec, varContextRef } = useTransformStyle(style, {
         enableVar,
         externalVarContext,
@@ -22,16 +21,14 @@ const _Text = forwardRef((props, ref) => {
     useNodesRef(props, ref, nodeRef, {
         style: normalStyle
     });
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(extendObject({}, props, {
         ref: nodeRef,
         style: normalStyle,
         selectable: !!selectable || !!userSelect,
         allowFontScaling
-    }, [
+    }), [
         'user-select'
-    ], {
-        layoutRef
-    });
+    ]);
     return createElement(Text, innerProps, wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current

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

@@ -206,7 +206,7 @@ const MpxVideo = forwardRef((videoProps, ref) => {
             licenseServer: licenseUrl
         };
     }
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         style: styles.video,
         ref: videoRef,
         source,
@@ -228,7 +228,7 @@ const MpxVideo = forwardRef((videoProps, ref) => {
         onFullscreenPlayerWillDismiss: bindfullscreenchange && handleExitFullScreen,
         onControlsVisibilityChange: bindcontrolstoggle && handleAndroidControlsVisibilityChange,
         onLoad: handleVideoLoad
-    }, layoutProps), [
+    }), [
         'src',
         'autoplay',
         'loop',

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

@@ -11,7 +11,7 @@ import Animated from 'react-native-reanimated';
 import useAnimationHooks from './useAnimationHooks';
 import useNodesRef from './useNodesRef';
 import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHover } from './utils';
-import { error } from '@mpxjs/utils';
+import { error, isFunction } from '@mpxjs/utils';
 import LinearGradient from 'react-native-linear-gradient';
 import { GestureDetector } from 'react-native-gesture-handler';
 import Portal from './mpx-portal';
@@ -543,7 +543,7 @@ function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backg
 }
 const _View = forwardRef((viewProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(viewProps);
-    let { style = {}, 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'enable-background': enableBackground, 'enable-fast-image': enableFastImage, 'enable-animation': enableAnimation, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, animation } = props;
+    let { style = {}, 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'enable-background': enableBackground, 'enable-fast-image': enableFastImage, 'enable-animation': enableAnimation, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, animation, catchtransitionend, bindtransitionend } = props;
     // 默认样式
     const defaultStyle = style.display === 'flex'
         ? {
@@ -575,15 +575,22 @@ const _View = forwardRef((viewProps, ref) => {
     });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const viewStyle = extendObject({}, innerStyle, layoutStyle);
+    const transitionend = isFunction(catchtransitionend)
+        ? catchtransitionend
+        : isFunction(bindtransitionend)
+            ? bindtransitionend
+            : undefined;
     const { enableStyleAnimation, animationStyle } = useAnimationHooks({
-        enableAnimation,
+        layoutRef,
         animation,
-        style: viewStyle
+        enableAnimation,
+        style: viewStyle,
+        transitionend
     });
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: enableStyleAnimation ? [viewStyle, animationStyle] : viewStyle
-    }, layoutProps), [
+    }), [
         'hover-start-time',
         'hover-stay-time',
         'hover-style',

package/lib/runtime/components/react/dist/useAnimationHooks.js

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef } from 'react';
-import { Easing, useSharedValue, withTiming, useAnimatedStyle, withSequence, withDelay, makeMutable, cancelAnimation } from 'react-native-reanimated';
-import { error, hasOwn } from '@mpxjs/utils';
+import { Easing, useSharedValue, withTiming, useAnimatedStyle, withSequence, withDelay, makeMutable, cancelAnimation, runOnJS } from 'react-native-reanimated';
+import { error, hasOwn, collectDataset } from '@mpxjs/utils';
 // 微信 timingFunction 和 RN Easing 对应关系
 const EasingKey = {
     linear: Easing.linear,
@@ -140,7 +140,7 @@ function getTransformObj(transforms) {
     }, {});
 }
 export default function useAnimationHooks(props) {
-    const { style = {}, animation, enableAnimation } = props;
+    const { style = {}, animation, enableAnimation, transitionend, layoutRef } = props;
     const enableStyleAnimation = enableAnimation || !!animation;
     const enableAnimationRef = useRef(enableStyleAnimation);
     if (enableAnimationRef.current !== enableStyleAnimation) {
@@ -249,10 +249,33 @@ export default function useAnimationHooks(props) {
             });
         });
     }
+    function withTimingCallback(finished, current, duration) {
+        if (!transitionend)
+            return;
+        const target = {
+            id: animation?.id || -1,
+            dataset: collectDataset(props),
+            offsetLeft: layoutRef?.current?.offsetLeft || 0,
+            offsetTop: layoutRef?.current?.offsetTop || 0
+        };
+        transitionend({
+            type: 'transitionend',
+            // elapsedTime 对齐wx 单位s
+            detail: { elapsedTime: duration ? duration / 1000 : 0, finished, current },
+            target,
+            currentTarget: target,
+            timeStamp: Date.now()
+        });
+    }
     // 创建单个animation
     function getAnimation({ key, value }, { delay, duration, easing }, callback) {
         const animation = typeof callback === 'function'
-            ? withTiming(value, { duration, easing }, callback)
+            ? withTiming(value, { duration, easing }, (finished, current) => {
+                callback(finished, current);
+                if (transitionend && finished) {
+                    runOnJS(withTimingCallback)(finished, current, duration);
+                }
+            })
             : withTiming(value, { duration, easing });
         return delay ? withDelay(delay, animation) : animation;
     }