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

package/lib/runtime/components/react/dist/mpx-sticky-header.jsx

@@ -0,0 +1,115 @@
+import { useEffect, useRef, useContext, forwardRef, useMemo, createElement, useId } from 'react';
+import { Animated, StyleSheet, useAnimatedValue } from 'react-native';
+import { ScrollViewContext, StickyContext } from './context';
+import useNodesRef from './useNodesRef';
+import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils';
+import { error } from '@mpxjs/utils';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+const _StickyHeader = forwardRef((stickyHeaderProps = {}, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(stickyHeaderProps);
+    const { style, bindstickontopchange, padding = [0, 0, 0, 0], 'offset-top': offsetTop = 0, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const scrollViewContext = useContext(ScrollViewContext);
+    const stickyContext = useContext(StickyContext);
+    const { scrollOffset } = scrollViewContext;
+    const { registerStickyHeader, unregisterStickyHeader } = stickyContext;
+    const headerRef = useRef(null);
+    const isStickOnTopRef = useRef(false);
+    const id = useId();
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { layoutRef, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: headerRef, onLayout });
+    const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
+    const headerTopAnimated = useAnimatedValue(0);
+    // harmony animatedValue 不支持通过 _value 访问
+    const headerTopRef = useRef(0);
+    useEffect(() => {
+        registerStickyHeader({ key: id, updatePosition });
+        return () => {
+            unregisterStickyHeader(id);
+        };
+    }, []);
+    function updatePosition() {
+        if (headerRef.current) {
+            const scrollViewRef = scrollViewContext.gestureRef;
+            if (scrollViewRef && scrollViewRef.current) {
+                headerRef.current.measureLayout(scrollViewRef.current, (left, top) => {
+                    Animated.timing(headerTopAnimated, {
+                        toValue: top,
+                        duration: 0,
+                        useNativeDriver: true
+                    }).start();
+                    headerTopRef.current = top;
+                });
+            }
+            else {
+                error('StickyHeader measureLayout error: scrollViewRef is not a valid native component reference');
+            }
+        }
+    }
+    function onLayout(e) {
+        updatePosition();
+    }
+    useNodesRef(props, ref, headerRef, {
+        style: normalStyle
+    });
+    useEffect(() => {
+        if (!bindstickontopchange)
+            return;
+        const listener = scrollOffset.addListener((state) => {
+            const currentScrollValue = state.value;
+            const newIsStickOnTop = currentScrollValue > headerTopRef.current;
+            if (newIsStickOnTop !== isStickOnTopRef.current) {
+                isStickOnTopRef.current = newIsStickOnTop;
+                bindstickontopchange(getCustomEvent('stickontopchange', {}, {
+                    detail: {
+                        isStickOnTop: newIsStickOnTop
+                    },
+                    layoutRef
+                }, props));
+            }
+        });
+        return () => {
+            scrollOffset.removeListener(listener);
+        };
+    }, []);
+    const animatedStyle = useMemo(() => {
+        const translateY = Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, 1],
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'extend'
+        });
+        const finalTranslateY = offsetTop === 0
+            ? translateY
+            : Animated.add(translateY, Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
+                inputRange: [0, 1],
+                outputRange: [0, offsetTop],
+                extrapolate: 'clamp'
+            }));
+        return {
+            transform: [{ translateY: finalTranslateY }]
+        };
+    }, [scrollOffset, headerTopAnimated, offsetTop]);
+    const innerProps = useInnerProps(extendObject({}, props, {
+        ref: headerRef,
+        style: extendObject({}, styles.content, innerStyle, animatedStyle, {
+            paddingTop: padding[0] || 0,
+            paddingRight: padding[1] || 0,
+            paddingBottom: padding[2] || 0,
+            paddingLeft: padding[3] || 0
+        })
+    }, layoutProps), [], { layoutRef });
+    return (createElement(Animated.View, innerProps, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    })));
+});
+const styles = StyleSheet.create({
+    content: {
+        width: '100%',
+        zIndex: 10
+    }
+});
+_StickyHeader.displayName = 'MpxStickyHeader';
+export default _StickyHeader;

package/lib/runtime/components/react/dist/mpx-sticky-section.jsx

@@ -0,0 +1,45 @@
+import { useRef, forwardRef, createElement, useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+import useNodesRef from './useNodesRef';
+import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils';
+import { StickyContext } from './context';
+import useInnerProps from './getInnerListeners';
+const _StickySection = forwardRef((stickySectionProps = {}, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(stickySectionProps);
+    const { style, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const sectionRef = useRef(null);
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: sectionRef, onLayout });
+    const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
+    const stickyHeaders = useRef(new Map());
+    const registerStickyHeader = useCallback((item) => {
+        stickyHeaders.current.set(item.id, item);
+    }, []);
+    const unregisterStickyHeader = useCallback((id) => {
+        stickyHeaders.current.delete(id);
+    }, []);
+    const contextValue = useMemo(() => ({
+        registerStickyHeader,
+        unregisterStickyHeader
+    }), []);
+    useNodesRef(props, ref, sectionRef, {
+        style: normalStyle
+    });
+    function onLayout() {
+        stickyHeaders.current.forEach(item => {
+            item.updatePosition();
+        });
+    }
+    const innerProps = useInnerProps(extendObject({}, props, {
+        style: extendObject(innerStyle, layoutStyle),
+        ref: sectionRef
+    }, layoutProps), [], { layoutRef });
+    return (createElement(View, innerProps, createElement(StickyContext.Provider, { value: contextValue }, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    }))));
+});
+_StickySection.displayName = 'MpxStickySection';
+export default _StickySection;

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, isHarmony } from './utils';
 import { SwiperContext } from './context';
 const _SwiperItem = forwardRef((props, ref) => {
     const { 'enable-var': enableVar, 'external-var-context': externalVarContext, style, customStyle, itemIndex } = props;
@@ -21,16 +21,15 @@ 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'
     ], { layoutRef });
     const itemAnimatedStyle = useAnimatedStyle(() => {
-        if (!step.value)
+        if (!step.value && !isHarmony)
             return {};
         const inputRange = [step.value, 0];
         const outputRange = [0.7, 1];

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, flatGesture } from './utils';
 import { SwiperContext } from './context';
 /**
  * 默认的Style类型
@@ -70,11 +70,13 @@ const easeMap = {
     easeInOutCubic: Easing.inOut(Easing.cubic)
 };
 const SwiperWrapper = forwardRef((props, ref) => {
-    const { 'indicator-dots': showsPagination, '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, style = {}, autoplay = false, circular = false } = props;
+    const { 'indicator-dots': showsPagination, '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 easeingFunc = props['easing-function'] || 'default';
     const easeDuration = props.duration || 500;
     const horizontal = props.vertical !== undefined ? !props.vertical : true;
     const nodeRef = useRef(null);
+    // 手势协同gesture 1.0
+    const swiperGestureRef = useRef();
     useNodesRef(props, ref, nodeRef, {});
     // 计算transfrom之类的
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, {
@@ -119,14 +121,35 @@ 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);
+    const waitForHandlers = flatGesture(waitFor);
+    // 判断gesture手势是否需要协同处理、等待手势失败响应
+    const gestureSwitch = useRef(false);
+    // 初始化上一次的手势
+    const prevSimultaneousHandlersRef = useRef(originSimultaneousHandlers || []);
+    const prevWaitForHandlersRef = useRef(waitFor || []);
+    const hasSimultaneousHandlersChanged = prevSimultaneousHandlersRef.current.length !== (originSimultaneousHandlers?.length || 0) ||
+        (originSimultaneousHandlers || []).some((handler, index) => handler !== prevSimultaneousHandlersRef.current[index]);
+    const hasWaitForHandlersChanged = prevWaitForHandlersRef.current.length !== (waitFor?.length || 0) ||
+        (waitFor || []).some((handler, index) => handler !== prevWaitForHandlersRef.current[index]);
+    if (hasSimultaneousHandlersChanged || hasWaitForHandlersChanged) {
+        gestureSwitch.current = !gestureSwitch.current;
+    }
+    // 存储上一次的手势
+    prevSimultaneousHandlersRef.current = originSimultaneousHandlers || [];
+    prevWaitForHandlersRef.current = waitFor || [];
     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 +210,8 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 dotAnimatedStyle
             ]}/>
           {dots}
-      </View>
-    </View>);
+        </View>
+      </View>);
     }
     function renderItems() {
         const intLen = children.length;
@@ -384,7 +407,11 @@ const SwiperWrapper = forwardRef((props, ref) => {
         }
     }, [children.length]);
     useEffect(() => {
-        updateCurrent(props.current || 0, step.value);
+        // 1. 如果用户在touch的过程中, 外部更新了current以外部为准（小程序表现）
+        // 2. 手指滑动过程中更新索引，外部会把current再穿进来，导致offset直接更新了
+        if (props.current !== currentIndex.value) {
+            updateCurrent(props.current || 0, step.value);
+        }
     }, [props.current]);
     useEffect(() => {
         autoplayShared.value = autoplay;
@@ -447,20 +474,26 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 targetOffset: -moveToTargetPos
             };
         }
-        function canMove(eventData) {
+        function checkUnCircular(eventData) {
             'worklet';
             const { translation } = eventData;
             const currentOffset = Math.abs(offset.value);
-            if (!circularShared.value) {
-                if (translation < 0) {
-                    return currentOffset < step.value * (childrenLength.value - 1);
-                }
-                else {
-                    return currentOffset > 0;
-                }
+            // 向右滑动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
+                };
             }
             else {
-                return true;
+                const gestureMovePos = currentOffset - translation;
+                return {
+                    targetOffset: gestureMovePos < 0 ? 0 : offset.value + translation,
+                    canMove: currentOffset > 0
+                };
             }
         }
         function handleEnd(eventData) {
@@ -511,7 +544,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 }
             });
         }
-        function handleLongPress() {
+        function computeHalf() {
             'worklet';
             const currentOffset = Math.abs(offset.value);
             let preOffset = (currentIndex.value + patchElmNumShared.value) * step.value;
@@ -521,6 +554,14 @@ 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)();
             }
@@ -580,19 +621,30 @@ const SwiperWrapper = forwardRef((props, ref) => {
             runOnJS(pauseLoop)();
             preAbsolutePos.value = e[strAbso];
             moveTranstion.value = e[strAbso];
+            anotherDirectionMove.value = e[anotherAbso];
             moveTime.value = new Date().getTime();
         })
-            .onTouchesMove((e) => {
+            .onUpdate((e) => {
             'worklet';
             if (touchfinish.value)
                 return;
-            const touchEventData = e.changedTouches[0];
-            const moveDistance = touchEventData[strAbso] - preAbsolutePos.value;
+            const moveDistance = e[strAbso] - preAbsolutePos.value;
             const eventData = {
                 translation: moveDistance
             };
-            // 处理用户一直拖拽到临界点的场景, 不会执行onEnd
-            if (!circularShared.value && !canMove(eventData)) {
+            // 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];
+                }
                 return;
             }
             const { isBoundary, resetOffset } = reachBoundary(eventData);
@@ -602,34 +654,44 @@ const SwiperWrapper = forwardRef((props, ref) => {
             else {
                 offset.value = moveDistance + offset.value;
             }
-            preAbsolutePos.value = touchEventData[strAbso];
+            preAbsolutePos.value = e[strAbso];
         })
-            .onTouchesUp((e) => {
+            .onFinalize((e) => {
             'worklet';
             if (touchfinish.value)
                 return;
-            const touchEventData = e.changedTouches[0];
-            const moveDistance = touchEventData[strAbso] - moveTranstion.value;
+            const moveDistance = e[strAbso] - moveTranstion.value;
             touchfinish.value = true;
             const eventData = {
                 translation: moveDistance
             };
-            // 用户手指按下起来, 需要计算正确的位置, 比如在滑动过程中突然按下然后起来,需要计算到正确的位置
-            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);
             }
-        });
+        }).withRef(swiperGestureRef);
+        // swiper横向,当y轴滑动5像素手势失效；swiper纵向只响应swiper的滑动事件
+        if (dir === 'x') {
+            gesturePan.activeOffsetX([-5, 5]).failOffsetY([-5, 5]);
+        }
+        else {
+            gesturePan.activeOffsetY([-5, 5]).failOffsetX([-5, 5]);
+        }
+        // 手势协同2.0
+        if (simultaneousHandlers && simultaneousHandlers.length) {
+            gesturePan.simultaneousWithExternalGesture(...simultaneousHandlers);
+        }
+        if (waitForHandlers && waitForHandlers.length) {
+            gesturePan.requireExternalGestureToFail(...waitForHandlers);
+        }
         return {
             gestureHandler: gesturePan
         };
-    }, []);
+    }, [gestureSwitch.current]);
     const animatedStyles = useAnimatedStyle(() => {
         if (dir === 'x') {
             return { transform: [{ translateX: offset.value }], opacity: step.value > 0 ? 1 : 0 };
@@ -641,12 +703,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,11 +716,11 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 textStyle,
                 textProps
             })}
-        </Animated.View>
-        {showsPagination && renderPagination()}
+      </Animated.View>
+      {showsPagination && renderPagination()}
     </View>);
     }
-    if (children.length === 1) {
+    if (children.length === 1 || disableGesture) {
         return renderSwiper();
     }
     else {

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,29 @@ const _View = forwardRef((viewProps, ref) => {
     });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const viewStyle = extendObject({}, innerStyle, layoutStyle);
-    const { enableStyleAnimation, animationStyle } = useAnimationHooks({
-        enableAnimation,
-        animation,
-        style: viewStyle
-    });
-    const innerProps = useInnerProps(props, extendObject({
+    const transitionend = isFunction(catchtransitionend)
+        ? catchtransitionend
+        : isFunction(bindtransitionend)
+            ? bindtransitionend
+            : null;
+    const { enableStyleAnimation, animationStyle } = useAnimationHooks(transitionend
+        ? {
+            layoutRef,
+            animation,
+            enableAnimation,
+            style: viewStyle,
+            transitionend
+        }
+        : {
+            layoutRef,
+            animation,
+            enableAnimation,
+            style: viewStyle
+        });
+    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,4 +1,4 @@
-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 { getCustomEvent } from './getInnerListeners';
@@ -74,17 +74,17 @@ const _WebView = forwardRef((props, ref) => {
         isNavigateBack.current = false;
     };
     const navigation = useNavigation();
-    useEffect(() => {
-        let beforeRemoveSubscription;
-        if (__mpx_mode__ !== 'ios') {
-            beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle);
-        }
-        return () => {
-            if (isFunction(beforeRemoveSubscription)) {
-                beforeRemoveSubscription();
-            }
-        };
-    }, []);
+    // useEffect(() => {
+    //   let beforeRemoveSubscription:any
+    //   if (__mpx_mode__ !== 'ios') {
+    //     beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle)
+    //   }
+    //   return () => {
+    //     if (isFunction(beforeRemoveSubscription)) {
+    //       beforeRemoveSubscription()
+    //     }
+    //   }
+    // }, [])
     useNodesRef(props, ref, webViewRef, {
         style: defaultWebViewStyle
     });
@@ -160,7 +160,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;