@mpxjs/webpack-plugin 2.10.3-beta.17 → 2.10.3-beta.18

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

@@ -10,6 +10,7 @@ import { warn } from '@mpxjs/utils';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import CheckBox from './mpx-checkbox';
+import Portal from './mpx-portal';
 import { FormContext } from './context';
 import { useTransformStyle, useLayout, extendObject } from './utils';
 const _Switch = forwardRef((props, ref) => {
@@ -21,7 +22,7 @@ const _Switch = forwardRef((props, ref) => {
     if (formContext) {
         formValuesMap = formContext.formValuesMap;
     }
-    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, {
+    const { normalStyle, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(style, {
         enableVar,
         externalVarContext,
         parentFontSize,
@@ -67,17 +68,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,
@@ -85,13 +84,17 @@ const _Switch = forwardRef((props, ref) => {
             checked: isChecked
         }));
     }
-    return createElement(Switch, extendObject({}, innerProps, {
+    let finalComponent = createElement(Switch, extendObject({}, innerProps, {
         style: normalStyle,
         value: isChecked,
         trackColor: { false: '#FFF', true: color },
         thumbColor: isChecked ? '#FFF' : '#f4f3f4',
         ios_backgroundColor: '#FFF'
     }));
+    if (hasPositionFixed) {
+        finalComponent = createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 _Switch.displayName = 'MpxSwitch';
 export default _Switch;

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

@@ -1,17 +1,41 @@
 /**
  * ✔ selectable
  * ✘ space
- * ✘ decode
+ * ✔ decode
  */
 import { Text } from 'react-native';
-import { useRef, forwardRef, createElement } from 'react';
+import { useRef, forwardRef, createElement, Children } from 'react';
+import Portal from './mpx-portal';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { useTransformStyle, wrapChildren } from './utils';
+import { useTransformStyle, wrapChildren, extendObject } from './utils';
+const decodeMap = {
+    '&lt;': '<',
+    '&gt;': '>',
+    '&quot;': '"',
+    '&amp;': '&',
+    '&#39;': '\'',
+    '&nbsp;': ' '
+};
+const encodedRe = /&(?:lt|gt|quot|amp|#39|nbsp);/g;
+function decode(value) {
+    if (value != null) {
+        return value.replace(encodedRe, function (match) {
+            return decodeMap[match];
+        });
+    }
+}
+function getDecodedChildren(children) {
+    return Children.map(children, (child) => {
+        if (typeof child === 'string') {
+            return decode(child);
+        }
+        return child;
+    });
+}
 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, {
+    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, decode } = props;
+    const { normalStyle, hasVarDec, varContextRef, hasPositionFixed } = useTransformStyle(style, {
         enableVar,
         externalVarContext,
         parentFontSize,
@@ -22,20 +46,26 @@ 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, {
+    }), [
+        'user-select',
+        'decode'
+    ]);
+    const children = decode ? getDecodedChildren(props.children) : props.children;
+    let finalComponent = createElement(Text, innerProps, wrapChildren(extendObject({}, props, {
+        children
+    }), {
         hasVarDec,
         varContext: varContextRef.current
     }));
+    if (hasPositionFixed) {
+        finalComponent = createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 _Text.displayName = 'MpxText';
 export default _Text;

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

@@ -64,10 +64,11 @@
  */
 import { useRef, forwardRef, createElement } from 'react';
 import Video, { DRMType } from 'react-native-video';
-import { StyleSheet, View, Platform } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { splitProps, useTransformStyle, useLayout, extendObject } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
+import Portal from './mpx-portal';
 const styles = StyleSheet.create({
     container: {
         width: 300,
@@ -85,7 +86,7 @@ const MpxVideo = forwardRef((videoProps, ref) => {
     const videoInfoRef = useRef({});
     const propsRef = useRef({});
     propsRef.current = props;
-    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(extendObject({}, styles.container, style), {
+    const { normalStyle, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(extendObject({}, styles.container, style), {
         enableVar,
         externalVarContext,
         parentFontSize,
@@ -132,7 +133,7 @@ const MpxVideo = forwardRef((videoProps, ref) => {
         // 手动拖拽进度条场景，android 可以触发，ios 不可以
         bindseekcomplete(getCustomEvent('seekcomplete', {}, {
             detail: {
-                position: Platform.OS === 'android' ? seekTime * 1000 : seekTime
+                position: __mpx_mode__ !== 'ios' ? seekTime * 1000 : seekTime
             },
             layoutRef
         }, propsRef.current));
@@ -202,11 +203,11 @@ const MpxVideo = forwardRef((videoProps, ref) => {
     if (isDrm) {
         source.drm = {
             type: DRMType.FAIRPLAY,
-            certificateUrl: Platform.OS === 'android' ? provisionUrl : certificateUrl,
+            certificateUrl: __mpx_mode__ !== 'ios' ? provisionUrl : certificateUrl,
             licenseServer: licenseUrl
         };
     }
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         style: styles.video,
         ref: videoRef,
         source,
@@ -228,7 +229,7 @@ const MpxVideo = forwardRef((videoProps, ref) => {
         onFullscreenPlayerWillDismiss: bindfullscreenchange && handleExitFullScreen,
         onControlsVisibilityChange: bindcontrolstoggle && handleAndroidControlsVisibilityChange,
         onLoad: handleVideoLoad
-    }, layoutProps), [
+    }), [
         'src',
         'autoplay',
         'loop',
@@ -243,6 +244,10 @@ const MpxVideo = forwardRef((videoProps, ref) => {
         'bindcontrolstoggle',
         'bindseekcomplete'
     ], { layoutRef });
-    return createElement(View, { style: extendObject({}, normalStyle, layoutStyle), ref: viewRef }, createElement(Video, innerProps));
+    let videoComponent = createElement(View, { style: extendObject({}, normalStyle, layoutStyle), ref: viewRef }, createElement(Video, innerProps));
+    if (hasPositionFixed) {
+        videoComponent = createElement(Portal, null, videoComponent);
+    }
+    return videoComponent;
 });
 export default MpxVideo;

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';
@@ -57,7 +57,7 @@ const normalizeStyle = (style = {}) => {
 const isPercent = (val) => typeof val === 'string' && PERCENT_REGEX.test(val);
 const isBackgroundSizeKeyword = (val) => typeof val === 'string' && /^cover|contain$/.test(val);
 const isNeedLayout = (preImageInfo) => {
-    const { sizeList, backgroundPosition, linearInfo } = preImageInfo;
+    const { sizeList, backgroundPosition, linearInfo, type } = preImageInfo;
     const [width, height] = sizeList;
     const bp = backgroundPosition;
     // 含有百分号，center 需计算布局
@@ -66,7 +66,8 @@ const isNeedLayout = (preImageInfo) => {
         (isPercent(width) && height === 'auto') ||
         isPercent(bp[1]) ||
         isPercent(bp[3]) ||
-        isDiagonalAngle(linearInfo);
+        isDiagonalAngle(linearInfo) ||
+        (type === 'linear' && (isPercent(height) || isPercent(width)));
 };
 const checkNeedLayout = (preImageInfo) => {
     const { sizeList } = preImageInfo;
@@ -155,7 +156,7 @@ function backgroundPosition(imageProps, preImageInfo, imageSize, layoutInfo) {
 }
 // background-size 转换
 function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
-    const sizeList = preImageInfo.sizeList;
+    const { sizeList, type } = preImageInfo;
     if (!sizeList)
         return;
     const { width: layoutWidth, height: layoutHeight } = layoutInfo || {};
@@ -202,10 +203,20 @@ function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
         else { // 数值类型      ImageStyle
             // 数值类型设置为 stretch
             imageProps.resizeMode = 'stretch';
-            dimensions = {
-                width: isPercent(width) ? width : +width,
-                height: isPercent(height) ? height : +height
-            };
+            if (type === 'linear' && (!layoutWidth || !layoutHeight)) {
+                // ios 上 linear 组件只要重新触发渲染，在渲染过程中外层容器 width 或者 height 被设置为 0，通过设置 % 的方式会渲染不出来，即使后面再更新为正常宽高也渲染不出来
+                // 所以 hack 手动先将 linear 宽高也设置为 0，后面再更新为正确的数值或 %。
+                dimensions = {
+                    width: 0,
+                    height: 0
+                };
+            }
+            else {
+                dimensions = {
+                    width: isPercent(width) ? width : +width,
+                    height: isPercent(height) ? height : +height
+                };
+            }
         }
     }
     // 样式合并
@@ -387,7 +398,7 @@ function parseLinearGradient(text) {
     });
 }
 function parseBgImage(text) {
-    if (!text)
+    if (!text || text === 'none')
         return {};
     const src = parseUrl(text);
     if (src)
@@ -523,10 +534,8 @@ function useWrapImage(imageStyle, innerStyle, enableFastImage) {
             setShow(true);
         }
     };
-    return <View key='backgroundImage' {...needLayout ? { onLayout } : null} style={{ ...inheritStyle(innerStyle), ...StyleSheet.absoluteFillObject, overflow: 'hidden' }}>
-    {show && type === 'linear' && <LinearGradient useAngle={true} {...imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current)}/>}
-    {show && type === 'image' && (renderImage(imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current), enableFastImage))}
-  </View>;
+    const backgroundProps = extendObject({ key: 'backgroundImage' }, needLayout ? { onLayout } : {}, { style: extendObject({}, inheritStyle(innerStyle), StyleSheet.absoluteFillObject, { overflow: 'hidden' }) });
+    return createElement(View, backgroundProps, show && type === 'linear' && createElement(LinearGradient, extendObject({ useAngle: true }, imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current))), show && type === 'image' && renderImage(imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current), enableFastImage));
 }
 function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps, innerStyle, enableFastImage }) {
     const children = wrapChildren(props, {
@@ -543,7 +552,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 +584,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/mpx-web-view.jsx

@@ -1,6 +1,7 @@
-import { forwardRef, useRef, useContext, useMemo, useState, useEffect } from 'react';
+import { forwardRef, useRef, useContext, useMemo, useState } from 'react';
 import { warn, isFunction } from '@mpxjs/utils';
 import Portal from './mpx-portal/index';
+import { usePreventRemove } from '@react-navigation/native';
 import { getCustomEvent } from './getInnerListeners';
 import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy';
 import { WebView } from 'react-native-webview';
@@ -55,8 +56,8 @@ const _WebView = forwardRef((props, ref) => {
     const webViewRef = useRef(null);
     const fristLoaded = useRef(false);
     const isLoadError = useRef(false);
+    const isNavigateBack = useRef(false);
     const statusCode = useRef('');
-    const [isLoaded, setIsLoaded] = useState(true);
     const defaultWebViewStyle = {
         position: 'absolute',
         left: 0,
@@ -64,35 +65,42 @@ const _WebView = forwardRef((props, ref) => {
         top: 0,
         bottom: 0
     };
-    const canGoBack = useRef(false);
-    const isNavigateBack = useRef(false);
-    const beforeRemoveHandle = (e) => {
-        if (canGoBack.current && !isNavigateBack.current) {
+    const navigation = useNavigation();
+    const [isIntercept, setIsIntercept] = useState(false);
+    usePreventRemove(isIntercept, (event) => {
+        const { data } = event;
+        if (isNavigateBack.current) {
+            navigation?.dispatch(data.action);
+        }
+        else {
             webViewRef.current?.goBack();
-            e.preventDefault();
         }
         isNavigateBack.current = false;
-    };
-    const navigation = useNavigation();
-    useEffect(() => {
-        let beforeRemoveSubscription;
-        if (__mpx_mode__ !== 'ios') {
-            beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle);
-        }
-        return () => {
-            if (isFunction(beforeRemoveSubscription)) {
-                beforeRemoveSubscription();
-            }
-        };
-    }, []);
+    });
     useNodesRef(props, ref, webViewRef, {
         style: defaultWebViewStyle
     });
+    const hostValidate = (url) => {
+        const host = url && new URL(url).host;
+        const hostWhitelists = mpx.config.rnConfig?.webviewConfig?.hostWhitelists || [];
+        if (hostWhitelists.length) {
+            return hostWhitelists.some((item) => {
+                return host.endsWith(item);
+            });
+        }
+        else {
+            return true;
+        }
+    };
     if (!src) {
         return null;
     }
+    if (!hostValidate(src)) {
+        console.error('访问页面域名不符合domainWhiteLists白名单配置，请确认是否正确配置该域名白名单');
+        return null;
+    }
     const _reload = function () {
-        if (__mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') {
+        if (__mpx_mode__ !== 'ios') {
             fristLoaded.current = false; // 安卓需要重新设置
         }
         setPageLoadErr(false);
@@ -131,16 +139,19 @@ const _WebView = forwardRef((props, ref) => {
     };
     const _changeUrl = function (navState) {
         if (navState.navigationType) { // navigationType这个事件在页面开始加载时和页面加载完成时都会被触发所以判断这个避免其他无效触发执行该逻辑
-            canGoBack.current = navState.canGoBack;
             currentPage.__webViewUrl = navState.url;
+            setIsIntercept(navState.canGoBack);
         }
     };
     const _onLoadProgress = function (event) {
-        if (__mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') {
-            canGoBack.current = event.nativeEvent.canGoBack;
+        if (__mpx_mode__ !== 'ios') {
+            setIsIntercept(event.nativeEvent.canGoBack);
         }
     };
     const _message = function (res) {
+        if (!hostValidate(res.nativeEvent?.url)) {
+            return;
+        }
         let data = {};
         let asyncCallback;
         const navObj = promisify({ redirectTo, navigateTo, navigateBack, reLaunch, switchTab });
@@ -160,7 +171,7 @@ const _WebView = forwardRef((props, ref) => {
                 { // case下不允许直接声明，包个块解决该问题
                     const title = postData._documentTitle?.trim();
                     if (title !== undefined) {
-                        navigation && navigation.setOptions({ title });
+                        navigation && navigation.setPageConfig({ navigationBarTitleText: title });
                     }
                 }
                 break;
@@ -192,7 +203,7 @@ const _WebView = forwardRef((props, ref) => {
                 break;
             default:
                 if (type) {
-                    const implement = mpx.config.webviewConfig.apiImplementations && mpx.config.webviewConfig.apiImplementations[type];
+                    const implement = mpx.config.rnConfig.webviewConfig && mpx.config.rnConfig.webviewConfig.apiImplementations && mpx.config.rnConfig.webviewConfig.apiImplementations[type];
                     if (isFunction(implement)) {
                         asyncCallback = Promise.resolve(implement(...params));
                     }
@@ -227,7 +238,6 @@ const _WebView = forwardRef((props, ref) => {
     };
     const onLoadEndHandle = function (res) {
         fristLoaded.current = true;
-        setIsLoaded(true);
         const src = res.nativeEvent?.url;
         if (isLoadError.current) {
             isLoadError.current = false;
@@ -254,8 +264,8 @@ const _WebView = forwardRef((props, ref) => {
         }
     };
     const onLoadEnd = function (res) {
-        res.persist();
-        if (__mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') {
+        if (__mpx_mode__ !== 'ios') {
+            res.persist();
             setTimeout(() => {
                 onLoadEndHandle(res);
             }, 0);
@@ -275,18 +285,13 @@ const _WebView = forwardRef((props, ref) => {
             setPageLoadErr(true);
         }
     };
-    const onLoadStart = function () {
-        if (!fristLoaded.current) {
-            setIsLoaded(false);
-        }
-    };
     return (<Portal>
         {pageLoadErr
             ? (<View style={[styles.loadErrorContext, defaultWebViewStyle]}>
               <View style={styles.loadErrorText}><Text style={{ fontSize: 14, color: '#999999' }}>{currentErrorText.text}</Text></View>
               <View style={styles.loadErrorButton} onTouchEnd={_reload}><Text style={{ fontSize: 12, color: '#666666' }}>{currentErrorText.button}</Text></View>
             </View>)
-            : (<WebView style={defaultWebViewStyle} pointerEvents={isLoaded ? 'auto' : 'none'} source={{ uri: src }} ref={webViewRef} javaScriptEnabled={true} onNavigationStateChange={_changeUrl} onMessage={_message} injectedJavaScript={injectedJavaScript} onLoadProgress={_onLoadProgress} onLoadEnd={onLoadEnd} onHttpError={onHttpError} onError={onError} onLoadStart={onLoadStart} allowsBackForwardNavigationGestures={true}></WebView>)}
+            : (<WebView style={defaultWebViewStyle} source={{ uri: src }} ref={webViewRef} javaScriptEnabled={true} onNavigationStateChange={_changeUrl} onMessage={_message} injectedJavaScript={injectedJavaScript} onLoadProgress={_onLoadProgress} onLoadEnd={onLoadEnd} onHttpError={onHttpError} onError={onError} allowsBackForwardNavigationGestures={true}></WebView>)}
       </Portal>);
 });
 _WebView.displayName = 'MpxWebview';

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

@@ -1,6 +1,7 @@
 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';
+import { useRunOnJSCallback } from './utils';
 // 微信 timingFunction 和 RN Easing 对应关系
 const EasingKey = {
     linear: Easing.linear,
@@ -48,90 +49,6 @@ const InitialValue = Object.assign({
 const TransformOrigin = 'transformOrigin';
 // transform
 const isTransform = (key) => Object.keys(TransformInitial).includes(key);
-// 多value解析
-const parseValues = (str, char = ' ') => {
-    let stack = 0;
-    let temp = '';
-    const result = [];
-    for (let i = 0; i < str.length; i++) {
-        if (str[i] === '(') {
-            stack++;
-        }
-        else if (str[i] === ')') {
-            stack--;
-        }
-        // 非括号内 或者 非分隔字符且非空
-        if (stack !== 0 || (str[i] !== char && str[i] !== ' ')) {
-            temp += str[i];
-        }
-        if ((stack === 0 && str[i] === char) || i === str.length - 1) {
-            result.push(temp);
-            temp = '';
-        }
-    }
-    return result;
-};
-// parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
-const parseTransform = (transformStr) => {
-    const values = parseValues(transformStr);
-    const transform = [];
-    values.forEach(item => {
-        const match = item.match(/([/\w]+)\((.+)\)/);
-        if (match && match.length >= 3) {
-            let key = match[1];
-            const val = match[2];
-            switch (key) {
-                case 'translateX':
-                case 'translateY':
-                case 'scaleX':
-                case 'scaleY':
-                case 'rotateX':
-                case 'rotateY':
-                case 'rotateZ':
-                case 'rotate':
-                case 'skewX':
-                case 'skewY':
-                case 'perspective':
-                    // rotate 处理成 rotateZ
-                    key = key === 'rotate' ? 'rotateZ' : key;
-                    // 单个值处理
-                    transform.push({ [key]: global.__formatValue(val) });
-                    break;
-                case 'matrix':
-                    transform.push({ [key]: parseValues(val, ',').map(val => +val) });
-                    break;
-                case 'translate':
-                case 'scale':
-                case 'skew':
-                case 'translate3d': // x y 支持 z不支持
-                case 'scale3d': // x y 支持 z不支持
-                    {
-                        // 2 个以上的值处理
-                        key = key.replace('3d', '');
-                        const vals = parseValues(val, ',').splice(0, 3);
-                        // scale(.5) === scaleX(.5) scaleY(.5)
-                        if (vals.length === 1 && key === 'scale') {
-                            vals.push(vals[0]);
-                        }
-                        const xyz = ['X', 'Y', 'Z'];
-                        transform.push(...vals.map((v, index) => {
-                            return { [`${key}${xyz[index] || ''}`]: global.__formatValue(v.trim()) };
-                        }));
-                        break;
-                    }
-            }
-        }
-    });
-    return transform;
-};
-// format style
-const formatStyle = (style) => {
-    if (!style.transform || Array.isArray(style.transform))
-        return style;
-    return Object.assign({}, style, {
-        transform: parseTransform(style.transform)
-    });
-};
 // transform 数组转对象
 function getTransformObj(transforms) {
     'worklet';
@@ -140,7 +57,7 @@ function getTransformObj(transforms) {
     }, {});
 }
 export default function useAnimationHooks(props) {
-    const { style = {}, animation, enableAnimation } = props;
+    const { style: originalStyle = {}, animation, enableAnimation, transitionend, layoutRef } = props;
     const enableStyleAnimation = enableAnimation || !!animation;
     const enableAnimationRef = useRef(enableStyleAnimation);
     if (enableAnimationRef.current !== enableStyleAnimation) {
@@ -148,7 +65,6 @@ export default function useAnimationHooks(props) {
     }
     if (!enableAnimationRef.current)
         return { enableStyleAnimation: false };
-    const originalStyle = formatStyle(style);
     // id 标识
     const id = animation?.id || -1;
     // 有动画样式的 style key
@@ -177,7 +93,7 @@ export default function useAnimationHooks(props) {
     useEffect(() => {
         // style 更新后同步更新 lastStyleRef & shareValMap
         updateStyleVal();
-    }, [style]);
+    }, [originalStyle]);
     // ** 获取动画样式prop & 驱动动画
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
@@ -249,10 +165,39 @@ 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()
+        });
+    }
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const runOnJSCallbackRef = useRef({
+        withTimingCallback
+    });
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
     // 创建单个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(runOnJSCallback)('withTimingCallback', finished, current, duration);
+                }
+            })
             : withTiming(value, { duration, easing });
         return delay ? withDelay(delay, animation) : animation;
     }