@mpxjs/webpack-plugin 2.10.6 → 2.10.7-beta.10

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

@@ -32,6 +32,7 @@
  * ✔ bindscroll
  */
 import { ScrollView, RefreshControl, Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { Animated as RNAnimated } from 'react-native';
 import { isValidElement, Children, useRef, useState, useEffect, forwardRef, useContext, useMemo, createElement } from 'react';
 import Animated, { useAnimatedRef, useSharedValue, withTiming, useAnimatedStyle, runOnJS } from 'react-native-reanimated';
 import { warn, hasOwn } from '@mpxjs/utils';
@@ -40,9 +41,11 @@ import useNodesRef from './useNodesRef';
 import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, HIDDEN_STYLE } from './utils';
 import { IntersectionObserverContext, ScrollViewContext } from './context';
 import Portal from './mpx-portal';
+const AnimatedScrollView = RNAnimated.createAnimatedComponent(ScrollView);
 const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(scrollViewProps);
-    const { enhanced = false, bounces = true, style = {}, binddragstart, binddragging, binddragend, bindtouchstart, bindtouchmove, bindtouchend, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'enable-trigger-intersection-observer': enableTriggerIntersectionObserver = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation = false, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'refresher-threshold': refresherThreshold = 45, 'show-scrollbar': showScrollbar = true, 'scroll-into-view': scrollIntoView = '', 'scroll-top': scrollTop = 0, 'scroll-left': scrollLeft = 0, 'refresher-triggered': refresherTriggered, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'simultaneous-handlers': originSimultaneousHandlers, 'wait-for': waitFor, 'scroll-event-throttle': scrollEventThrottle = 0, __selectRef } = props;
+    const { enhanced = false, bounces = true, style = {}, binddragstart, binddragging, binddragend, bindtouchstart, bindtouchmove, bindtouchend, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'enable-trigger-intersection-observer': enableTriggerIntersectionObserver = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation = false, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'refresher-threshold': refresherThreshold = 45, 'show-scrollbar': showScrollbar = true, 'scroll-into-view': scrollIntoView = '', 'scroll-top': scrollTop = 0, 'scroll-left': scrollLeft = 0, 'refresher-triggered': refresherTriggered, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'simultaneous-handlers': originSimultaneousHandlers, 'wait-for': waitFor, 'enable-sticky': enableSticky, 'scroll-event-throttle': scrollEventThrottle = 0, 'scroll-into-view-offset': scrollIntoViewOffset = 0, __selectRef } = props;
+    const scrollOffset = useRef(new RNAnimated.Value(0)).current;
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
     const waitForHandlers = flatGesture(waitFor);
     const snapScrollTop = useRef(0);
@@ -66,7 +69,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const hasCallScrollToLower = useRef(false);
     const initialTimeout = useRef(null);
     const intersectionObservers = useContext(IntersectionObserverContext);
-    const firstScrollIntoViewChange = useRef(false);
+    const firstScrollIntoViewChange = useRef(true);
     const refreshColor = {
         black: ['#000'],
         white: ['#fff']
@@ -86,16 +89,18 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             pagingEnabled,
             fastDeceleration: false,
             decelerationDisabled: false,
-            scrollTo
+            scrollTo,
+            scrollIntoView: handleScrollIntoView
         },
         gestureRef: scrollViewRef
     });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout });
     const contextValue = useMemo(() => {
         return {
-            gestureRef: scrollViewRef
+            gestureRef: scrollViewRef,
+            scrollOffset
         };
     }, []);
-    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout });
     const hasRefresherLayoutRef = useRef(false);
     // layout 完成前先隐藏，避免安卓闪烁问题
     const refresherLayoutStyle = useMemo(() => { return !hasRefresherLayoutRef.current ? HIDDEN_STYLE : {}; }, [hasRefresherLayoutRef.current]);
@@ -115,14 +120,16 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     }, [scrollTop, scrollLeft]);
     useEffect(() => {
         if (scrollIntoView && __selectRef) {
-            if (!firstScrollIntoViewChange.current) {
-                setTimeout(handleScrollIntoView);
+            if (firstScrollIntoViewChange.current) {
+                setTimeout(() => {
+                    handleScrollIntoView(scrollIntoView, { offset: scrollIntoViewOffset, animated: scrollWithAnimation });
+                });
             }
             else {
-                handleScrollIntoView();
+                handleScrollIntoView(scrollIntoView, { offset: scrollIntoViewOffset, animated: scrollWithAnimation });
             }
         }
-        firstScrollIntoViewChange.current = true;
+        firstScrollIntoViewChange.current = false;
     }, [scrollIntoView]);
     useEffect(() => {
         if (refresherEnabled) {
@@ -142,13 +149,15 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     function scrollTo({ top = 0, left = 0, animated = false }) {
         scrollToOffset(left, top, animated);
     }
-    function handleScrollIntoView() {
-        const refs = __selectRef(`#${scrollIntoView}`, 'node');
+    function handleScrollIntoView(selector = '', { offset = 0, animated = true } = {}) {
+        const refs = __selectRef(`#${selector}`, 'node');
         if (!refs)
             return;
         const { nodeRef } = refs.getNodeInstance();
         nodeRef.current?.measureLayout(scrollViewRef.current, (left, top) => {
-            scrollToOffset(left, top);
+            const adjustedLeft = scrollX ? left + offset : left;
+            const adjustedTop = scrollY ? top + offset : top;
+            scrollToOffset(adjustedLeft, adjustedTop, animated);
         });
     }
     function selectLength(size) {
@@ -321,6 +330,12 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         updateScrollOptions(e, { scrollLeft, scrollTop });
         updateIntersection();
     }
+    const scrollHandler = RNAnimated.event([{ nativeEvent: { contentOffset: { y: scrollOffset } } }], {
+        useNativeDriver: true,
+        listener: (event) => {
+            onScroll(event);
+        }
+    });
     function onScrollDragStart(e) {
         hasCallScrollToLower.current = false;
         hasCallScrollToUpper.current = false;
@@ -481,7 +496,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         scrollEnabled: !enableScroll ? false : !!(scrollX || scrollY),
         bounces: false,
         ref: scrollViewRef,
-        onScroll: onScroll,
+        onScroll: enableSticky ? scrollHandler : onScroll,
         onContentSizeChange: onContentSizeChange,
         bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) && onScrollTouchStart,
         bindtouchmove: ((enhanced && binddragging) || bindtouchmove) && onScrollTouchMove,
@@ -523,13 +538,14 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         'bindscrolltolower',
         'bindrefresherrefresh'
     ], { layoutRef });
-    const withRefresherScrollView = createElement(GestureDetector, { gesture: panGesture }, createElement(ScrollView, innerProps, createElement(Animated.View, { style: [refresherAnimatedStyle, refresherLayoutStyle], onLayout: onRefresherLayout }, refresherContent), createElement(Animated.View, { style: contentAnimatedStyle }, createElement(ScrollViewContext.Provider, { value: contextValue }, wrapChildren(extendObject({}, props, { children: otherContent }), {
+    const ScrollViewComponent = enableSticky ? AnimatedScrollView : ScrollView;
+    const withRefresherScrollView = createElement(GestureDetector, { gesture: panGesture }, createElement(ScrollViewComponent, innerProps, createElement(Animated.View, { style: [refresherAnimatedStyle, refresherLayoutStyle], onLayout: onRefresherLayout }, refresherContent), createElement(Animated.View, { style: contentAnimatedStyle }, createElement(ScrollViewContext.Provider, { value: contextValue }, wrapChildren(extendObject({}, props, { children: otherContent }), {
         hasVarDec,
         varContext: varContextRef.current,
         textStyle,
         textProps
     })))));
-    const commonScrollView = createElement(ScrollView, extendObject(innerProps, {
+    const commonScrollView = createElement(ScrollViewComponent, extendObject({}, innerProps, {
         refreshControl: refresherEnabled
             ? createElement(RefreshControl, extendObject({
                 progressBackgroundColor: refresherBackground,

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

@@ -0,0 +1,117 @@
+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,
+        // harmony 需要手动设置 relative， zIndex 才生效
+        position: 'relative'
+    }
+});
+_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, createElement } from 'react';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, extendObject } 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;
@@ -29,7 +29,7 @@ const _SwiperItem = forwardRef((props, ref) => {
         '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

@@ -125,6 +125,10 @@ 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);
@@ -405,7 +409,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;
@@ -468,20 +476,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) {
@@ -541,7 +555,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;
@@ -551,6 +565,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)();
             }
@@ -610,19 +632,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);
@@ -632,30 +665,23 @@ 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 (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-view.jsx

@@ -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,23 @@ 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') {
+                const dimensionWidth = calcPercent(width, layoutWidth) || 0;
+                const dimensionHeight = calcPercent(height, layoutHeight) || 0;
+                // ios 上 linear 组件只要重新触发渲染，在渲染过程中 width 或者 height 被设置为 0，即使后面再更新为正常宽高，也会渲染不出来
+                if (dimensionWidth && dimensionHeight) {
+                    dimensions = {
+                        width: dimensionWidth,
+                        height: dimensionHeight
+                    };
+                }
+            }
+            else {
+                dimensions = {
+                    width: isPercent(width) ? width : +width,
+                    height: isPercent(height) ? height : +height
+                };
+            }
         }
     }
     // 样式合并

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;