@mpxjs/webpack-plugin 2.10.7-beta.9 → 2.10.8-beta.1

package/lib/runtime/components/react/dist/mpx-page-container.jsx

@@ -0,0 +1,255 @@
+import { createElement, forwardRef, useEffect, useRef, useState } from 'react';
+import { StyleSheet, Animated, Dimensions, TouchableWithoutFeedback, PanResponder } from 'react-native';
+import Portal from './mpx-portal/index';
+import { usePreventRemove } from '@react-navigation/native';
+import { extendObject, useLayout, useNavigation } from './utils';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+const screenHeight = Dimensions.get('window').height;
+const screenWidth = Dimensions.get('window').width;
+function nextTick(cb) {
+    setTimeout(cb, 0);
+}
+export default forwardRef((props, ref) => {
+    const { show, duration = 300, 'z-index': zIndex = 100, overlay = true, position = 'bottom', round = false, 'close-on-slide-down': closeOnSlideDown = false, 'overlay-style': overlayStyle, 'custom-style': customStyle, bindclose, // RN下特有属性，用于同步show状态到父组件
+    bindbeforeenter, bindenter, bindafterenter, bindbeforeleave, bindleave, bindafterleave, bindclickoverlay, children } = props;
+    const isFirstRenderFlag = useRef(true);
+    const isFirstRender = isFirstRenderFlag.current;
+    if (isFirstRenderFlag.current) {
+        isFirstRenderFlag.current = false;
+    }
+    const close = () => {
+        bindclose(getCustomEvent('close', {}, { detail: { value: false, source: 'close' } }, props));
+    };
+    const [internalVisible, setInternalVisible] = useState(show); // 控制组件是否挂载
+    const overlayOpacity = useRef(new Animated.Value(0)).current;
+    const contentOpacity = useRef(new Animated.Value(position === 'center' ? 0 : 1)).current;
+    const contentTranslate = useRef(new Animated.Value(getInitialPosition())).current;
+    const currentAnimation = useRef(null);
+    function getInitialPosition() {
+        switch (position) {
+            case 'top':
+                return -screenHeight;
+            case 'bottom':
+                return screenHeight;
+            case 'right':
+                return screenWidth;
+            case 'center':
+                return 0;
+            default:
+                return screenHeight;
+        }
+    }
+    const currentTick = useRef(0);
+    function createTick() {
+        currentTick.current++;
+        console.log('currentTick.current++', currentTick.current);
+        const current = currentTick.current;
+        return () => {
+            console.log('currentTick.current', currentTick.current, 'current', current);
+            return currentTick.current === current;
+        };
+    }
+    // 播放入场动画
+    const animateIn = () => {
+        const isCurrentTick = createTick();
+        const animateOutFinish = currentAnimation.current === null;
+        if (!animateOutFinish) {
+            currentAnimation.current.forEach((animation) => animation.stop());
+        }
+        const animations = [
+            Animated.timing(contentTranslate, {
+                toValue: 0,
+                duration,
+                useNativeDriver: true
+            }),
+            Animated.timing(contentOpacity, {
+                toValue: 1,
+                duration,
+                useNativeDriver: true
+            }),
+            Animated.timing(overlayOpacity, {
+                toValue: 1,
+                duration,
+                useNativeDriver: true
+            })
+        ];
+        currentAnimation.current = animations;
+        // 所有生命周期需相隔一个nextTick以保证在生命周期中修改show可在组件内部监听到
+        bindbeforeenter && bindbeforeenter(getCustomEvent('beforeenter', {}, { detail: { value: false, source: 'beforeenter' } }, props));
+        nextTick(() => {
+            bindenter && bindenter(getCustomEvent('enter', {}, { detail: { value: false, source: 'enter' } }, props));
+            // 与微信对其， bindenter 需要执行，所以 isCurrentTick 放在后面
+            if (!isCurrentTick())
+                return;
+            console.log('animateIn start');
+            // 设置为动画初始状态(特殊情况， 如果退场动画没有结束 或者 退场动画还未开始，则无需初始化，而是从当前位置完成动画)
+            if (animateOutFinish) {
+                contentTranslate.setValue(getInitialPosition());
+                contentOpacity.setValue(position === 'center' ? 0 : 1);
+            }
+            Animated.parallel(animations).start(() => {
+                bindafterenter && bindafterenter(getCustomEvent('afterenter', {}, { detail: { value: false, source: 'afterenter' } }, props));
+            });
+        });
+    };
+    // 播放离场动画
+    const animateOut = () => {
+        const isCurrentTick = createTick();
+        // 停止入场动画
+        currentAnimation.current?.forEach((animation) => animation.stop());
+        const animations = [Animated.timing(overlayOpacity, {
+                toValue: 0,
+                duration,
+                useNativeDriver: true
+            })
+        ];
+        if (position === 'center') {
+            animations.push(Animated.timing(contentOpacity, {
+                toValue: 0,
+                duration,
+                useNativeDriver: true
+            }));
+        }
+        else {
+            animations.push(Animated.timing(contentTranslate, {
+                toValue: getInitialPosition(),
+                duration,
+                useNativeDriver: true
+            }));
+        }
+        currentAnimation.current = animations;
+        bindbeforeleave && bindbeforeleave(getCustomEvent('beforeleave', {}, { detail: { value: false, source: 'beforeleave' } }, props));
+        nextTick(() => {
+            bindleave && bindleave(getCustomEvent('leave', {}, { detail: { value: false, source: 'leave' } }, props));
+            if (!isCurrentTick())
+                return;
+            console.log('animateOut start');
+            Animated.parallel(animations).start(() => {
+                currentAnimation.current = null;
+                bindafterleave && bindafterleave(getCustomEvent('afterleave', {}, { detail: { value: false, source: 'afterleave' } }, props));
+                setInternalVisible(false); // 动画播放完后，才卸载
+            });
+        });
+    };
+    useEffect(() => {
+        console.log('====comp show', show, 'internalVisible', internalVisible);
+        // 如果展示状态和挂载状态一致，则不需要做任何操作
+        if (show) {
+            setInternalVisible(true); // 确保挂载
+            animateIn();
+        }
+        else {
+            if (!isFirstRender)
+                animateOut();
+        }
+    }, [show]);
+    const navigation = useNavigation();
+    usePreventRemove(show, (event) => {
+        const { data } = event;
+        if (show) {
+            close();
+        }
+        else {
+            navigation?.dispatch(data.action);
+        }
+    });
+    // IOS 下需要关闭手势返回（原因： IOS手势返回时页面会跟随手指滑动，但是实际返回动作是在松手时触发，需禁掉页面跟随手指滑动的效果）
+    useEffect(() => {
+        navigation?.setOptions({
+            gestureEnabled: !show
+        });
+    }, [show]);
+    const SCREEN_EDGE_THRESHOLD = 60; // 从屏幕左侧 30px 内触发
+    // 内容区 手势下滑关闭
+    const contentPanResponder = PanResponder.create({
+        onMoveShouldSetPanResponder: (_, gestureState) => {
+            const { dx, dy } = gestureState;
+            return dy > 200 && Math.abs(dx) < 60;
+        },
+        onPanResponderRelease: () => {
+            close();
+        }
+    });
+    // 全屏幕 IOS 右滑手势返回
+    const screenPanResponder = PanResponder.create({
+        onMoveShouldSetPanResponder: (_, gestureState) => {
+            const { moveX, dx, dy } = gestureState;
+            const isFromEdge = moveX < SCREEN_EDGE_THRESHOLD;
+            const isHorizontalSwipe = dx > 10 && Math.abs(dy) < 20;
+            return isFromEdge && isHorizontalSwipe;
+        },
+        onPanResponderRelease: (_, gestureState) => {
+            if (gestureState.dx > 100) {
+                close();
+            }
+        }
+    });
+    const getTransformStyle = () => {
+        switch (position) {
+            case 'top':
+            case 'bottom':
+                return { transform: [{ translateY: contentTranslate }] };
+            case 'right':
+                return { transform: [{ translateX: contentTranslate }] };
+            case 'center':
+                return {};
+        }
+    };
+    const renderMask = () => {
+        const onPress = () => {
+            close();
+            bindclickoverlay && bindclickoverlay(getCustomEvent('clickoverlay', {}, { detail: { value: false, source: 'clickoverlay' } }, props));
+        };
+        return createElement(TouchableWithoutFeedback, { onPress }, createElement(Animated.View, { style: [styles.overlay, overlayStyle, { opacity: overlayOpacity }] }));
+    };
+    const renderContent = (children) => {
+        const contentProps = extendObject({
+            style: [
+                styles.container,
+                round ? styles.rounded : null,
+                positionStyle[position],
+                customStyle,
+                getTransformStyle(),
+                { opacity: contentOpacity }
+            ]
+        }, closeOnSlideDown ? contentPanResponder.panHandlers : null);
+        return createElement(Animated.View, contentProps, children);
+    };
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {});
+    const { layoutRef, layoutProps } = useLayout({ props, hasSelfPercent: false, nodeRef });
+    const innerProps = useInnerProps(extendObject({}, props, {
+        ref: nodeRef
+    }, layoutProps), [], { layoutRef });
+    const wrapperProps = extendObject(innerProps, {
+        style: [styles.wrapper, { zIndex }]
+    }, __mpx_mode__ === 'ios' ? screenPanResponder.panHandlers : {});
+    // TODO 是否有必要支持refs? dataset?
+    return createElement(Portal, null, internalVisible
+        ? createElement(Animated.View, wrapperProps, overlay ? renderMask() : null, renderContent(children))
+        : null);
+});
+const styles = StyleSheet.create({
+    wrapper: extendObject({
+        justifyContent: 'flex-end',
+        alignItems: 'center'
+    }, StyleSheet.absoluteFillObject),
+    overlay: extendObject({
+        backgroundColor: 'rgba(0,0,0,0.5)'
+    }, StyleSheet.absoluteFillObject),
+    container: {
+        position: 'absolute',
+        backgroundColor: 'white'
+    },
+    rounded: {
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20
+    }
+});
+const positionStyle = {
+    bottom: { bottom: 0, width: '100%', height: 'auto' },
+    top: { top: 0, width: '100%', height: 'auto' },
+    right: extendObject({}, StyleSheet.absoluteFillObject, { right: 0 }),
+    center: extendObject({}, StyleSheet.absoluteFillObject)
+};

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

@@ -71,7 +71,7 @@ const easeMap = {
     easeInOutCubic: Easing.inOut(Easing.cubic)
 };
 const SwiperWrapper = forwardRef((props, ref) => {
-    const { 'indicator-dots': showPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, autoplay = false, circular = false, disableGesture = false } = props;
+    const { 'indicator-dots': showPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, autoplay = false, circular = false, disableGesture = false, bindchange } = props;
     const easeingFunc = props['easing-function'] || 'default';
     const easeDuration = props.duration || 500;
     const horizontal = props.vertical !== undefined ? !props.vertical : true;
@@ -125,10 +125,6 @@ const SwiperWrapper = forwardRef((props, ref) => {
     const moveTranstion = useSharedValue(0);
     // 记录从onBegin 到 onTouchesUp 的时间
     const moveTime = useSharedValue(0);
-    // 记录从onBegin 到 onTouchesCancelled 另外一个方向移动的距离
-    const anotherDirectionMove = useSharedValue(0);
-    // 另一个方向的
-    const anotherAbso = 'absolute' + (dir === 'x' ? 'y' : 'x').toUpperCase();
     const timerId = useRef(0);
     const intervalTimer = props.interval || 500;
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
@@ -334,6 +330,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         if (props.current !== currentIndex.value) {
             const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
             props.bindchange && props.bindchange(eventData);
+            bindchange && bindchange(eventData);
         }
     }
     function getOffset(index, stepValue) {
@@ -377,7 +374,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
     // 1. 用户在当前页切换选中项，动画；用户携带选中index打开到swiper页直接选中不走动画
     useAnimatedReaction(() => currentIndex.value, (newIndex, preIndex) => {
         // 这里必须传递函数名, 直接写()=> {}形式会报 访问了未sharedValue信息
-        if (newIndex !== preIndex && props.bindchange) {
+        if (newIndex !== preIndex && bindchange) {
             runOnJS(handleSwiperChange)(newIndex);
         }
     });
@@ -409,11 +406,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         }
     }, [children.length]);
     useEffect(() => {
-        // 1. 如果用户在touch的过程中, 外部更新了current以外部为准（小程序表现）
-        // 2. 手指滑动过程中更新索引，外部会把current再穿进来，导致offset直接更新了
-        if (props.current !== currentIndex.value) {
-            updateCurrent(props.current || 0, step.value);
-        }
+        updateCurrent(props.current || 0, step.value);
     }, [props.current]);
     useEffect(() => {
         autoplayShared.value = autoplay;
@@ -476,26 +469,20 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 targetOffset: -moveToTargetPos
             };
         }
-        function checkUnCircular(eventData) {
+        function canMove(eventData) {
             'worklet';
             const { translation } = eventData;
             const currentOffset = Math.abs(offset.value);
-            // 向右滑动swiper
-            if (translation < 0) {
-                const boundaryOffset = step.value * (childrenLength.value - 1);
-                const gestureMovePos = Math.abs(translation) + currentOffset;
-                return {
-                    // 防止快速连续向右滑动时，手势移动的距离 加 当前的offset超出边界
-                    targetOffset: gestureMovePos > boundaryOffset ? -boundaryOffset : offset.value + translation,
-                    canMove: currentOffset < boundaryOffset
-                };
+            if (!circularShared.value) {
+                if (translation < 0) {
+                    return currentOffset < step.value * (childrenLength.value - 1);
+                }
+                else {
+                    return currentOffset > 0;
+                }
             }
             else {
-                const gestureMovePos = currentOffset - translation;
-                return {
-                    targetOffset: gestureMovePos < 0 ? 0 : offset.value + translation,
-                    canMove: currentOffset > 0
-                };
+                return true;
             }
         }
         function handleEnd(eventData) {
@@ -555,7 +542,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 }
             });
         }
-        function computeHalf() {
+        function handleLongPress() {
             'worklet';
             const currentOffset = Math.abs(offset.value);
             let preOffset = (currentIndex.value + patchElmNumShared.value) * step.value;
@@ -565,14 +552,6 @@ const SwiperWrapper = forwardRef((props, ref) => {
             // 正常事件中拿到的transition值(正向滑动<0，倒着滑>0)
             const diffOffset = preOffset - currentOffset;
             const half = Math.abs(diffOffset) > step.value / 2;
-            return {
-                diffOffset,
-                half
-            };
-        }
-        function handleLongPress() {
-            'worklet';
-            const { diffOffset, half } = computeHalf();
             if (+diffOffset === 0) {
                 runOnJS(resumeLoop)();
             }
@@ -632,30 +611,19 @@ const SwiperWrapper = forwardRef((props, ref) => {
             runOnJS(pauseLoop)();
             preAbsolutePos.value = e[strAbso];
             moveTranstion.value = e[strAbso];
-            anotherDirectionMove.value = e[anotherAbso];
             moveTime.value = new Date().getTime();
         })
-            .onUpdate((e) => {
+            .onTouchesMove((e) => {
             'worklet';
             if (touchfinish.value)
                 return;
-            const moveDistance = e[strAbso] - preAbsolutePos.value;
+            const touchEventData = e.changedTouches[0];
+            const moveDistance = touchEventData[strAbso] - preAbsolutePos.value;
             const eventData = {
                 translation: moveDistance
             };
-            // 1. 在Move过程中，如果手指一直没抬起来，超过一半的话也会更新索引
-            const { half } = computeHalf();
-            if (half) {
-                const { selectedIndex } = getTargetPosition(eventData);
-                currentIndex.value = selectedIndex;
-            }
-            // 2. 处理用户一直拖拽到临界点的场景, 不会执行onEnd
-            const { canMove, targetOffset } = checkUnCircular(eventData);
-            if (!circularShared.value) {
-                if (canMove) {
-                    offset.value = targetOffset;
-                    preAbsolutePos.value = e[strAbso];
-                }
+            // 处理用户一直拖拽到临界点的场景, 不会执行onEnd
+            if (!circularShared.value && !canMove(eventData)) {
                 return;
             }
             const { isBoundary, resetOffset } = reachBoundary(eventData);
@@ -665,23 +633,30 @@ const SwiperWrapper = forwardRef((props, ref) => {
             else {
                 offset.value = moveDistance + offset.value;
             }
-            preAbsolutePos.value = e[strAbso];
+            preAbsolutePos.value = touchEventData[strAbso];
         })
-            .onFinalize((e) => {
+            .onTouchesUp((e) => {
             'worklet';
             if (touchfinish.value)
                 return;
-            const moveDistance = e[strAbso] - moveTranstion.value;
+            const touchEventData = e.changedTouches[0];
+            const moveDistance = touchEventData[strAbso] - moveTranstion.value;
             touchfinish.value = true;
             const eventData = {
                 translation: moveDistance
             };
+            if (childrenLength.value === 1) {
+                return handleBackInit();
+            }
+            // 用户手指按下起来, 需要计算正确的位置, 比如在滑动过程中突然按下然后起来,需要计算到正确的位置
+            if (!circularShared.value && !canMove(eventData)) {
+                return;
+            }
             const strVelocity = moveDistance / (new Date().getTime() - moveTime.value) * 1000;
             if (Math.abs(strVelocity) < longPressRatio) {
                 handleLongPress();
             }
             else {
-                // 如果触发了onTouchesCancelled，不会触发onUpdate不会更新offset值, 索引不会变更
                 handleEnd(eventData);
             }
         })

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

@@ -1,6 +1,7 @@
 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,27 +65,18 @@ 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:any
-    //   if (__mpx_mode__ !== 'ios') {
-    //     beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle)
-    //   }
-    //   return () => {
-    //     if (isFunction(beforeRemoveSubscription)) {
-    //       beforeRemoveSubscription()
-    //     }
-    //   }
-    // }, [])
+    });
     useNodesRef(props, ref, webViewRef, {
         style: defaultWebViewStyle
     });
@@ -131,13 +123,13 @@ 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__ !== 'ios') {
-            canGoBack.current = event.nativeEvent.canGoBack;
+            setIsIntercept(event.nativeEvent.canGoBack);
         }
     };
     const _message = function (res) {
@@ -227,7 +219,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;
@@ -275,18 +266,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

@@ -48,90 +48,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 +56,7 @@ function getTransformObj(transforms) {
     }, {});
 }
 export default function useAnimationHooks(props) {
-    const { style = {}, animation, enableAnimation, transitionend, layoutRef } = props;
+    const { style: originalStyle = {}, animation, enableAnimation, transitionend, layoutRef } = props;
     const enableStyleAnimation = enableAnimation || !!animation;
     const enableAnimationRef = useRef(enableStyleAnimation);
     if (enableAnimationRef.current !== enableStyleAnimation) {
@@ -148,7 +64,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 +92,7 @@ export default function useAnimationHooks(props) {
     useEffect(() => {
         // style 更新后同步更新 lastStyleRef & shareValMap
         updateStyleVal();
-    }, [style]);
+    }, [originalStyle]);
     // ** 获取动画样式prop & 驱动动画
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {

package/lib/runtime/components/react/getInnerListeners.ts

@@ -24,7 +24,7 @@ const getTouchEvent = (
 ) => {
   const { navigation, propsRef, layoutRef } = config
   const props = propsRef.current
-  const { y: navigationY = 0 } = navigation?.layout || {}
+  const { top: navigationY = 0 } = navigation?.layout || {}
   const nativeEvent = event.nativeEvent
   const { timestamp, pageX, pageY, touches, changedTouches } = nativeEvent
   const { id } = props