@mpxjs/webpack-plugin 2.10.5 → 2.10.6-beta.1

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

@@ -32,16 +32,20 @@
  * ✔ 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 } from '@mpxjs/utils';
+import { warn, hasOwn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 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, __selectRef } = props;
+    const scrollOffset = useRef(new RNAnimated.Value(0)).current;
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
     const waitForHandlers = flatGesture(waitFor);
     const snapScrollTop = useRef(0);
@@ -72,7 +76,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     };
     const { refresherContent, otherContent } = getRefresherContent(props.children);
     const hasRefresher = refresherContent && refresherEnabled;
-    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
     const scrollViewRef = useAnimatedRef();
     useNodesRef(props, ref, scrollViewRef, {
@@ -89,12 +93,13 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         },
         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]);
@@ -320,6 +325,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;
@@ -464,7 +475,11 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     })
         .simultaneousWithExternalGesture(scrollViewRef);
     const scrollAdditionalProps = extendObject({
-        style: extendObject({}, innerStyle, layoutStyle),
+        style: extendObject(hasOwn(innerStyle, 'flex') || hasOwn(innerStyle, 'flexGrow')
+            ? {}
+            : {
+                flexGrow: 0
+            }, innerStyle, layoutStyle),
         pinchGestureEnabled: false,
         alwaysBounceVertical: false,
         alwaysBounceHorizontal: false,
@@ -476,7 +491,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,
@@ -518,13 +533,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,
@@ -540,7 +556,11 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         textStyle,
         textProps
     })));
-    return hasRefresher ? withRefresherScrollView : commonScrollView;
+    let scrollViewComponent = hasRefresher ? withRefresherScrollView : commonScrollView;
+    if (hasPositionFixed) {
+        scrollViewComponent = createElement(Portal, null, scrollViewComponent);
+    }
+    return scrollViewComponent;
 });
 _ScrollView.displayName = 'MpxScrollView';
 export default _ScrollView;

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

@@ -1,5 +1,5 @@
 import Animated, { useAnimatedStyle, interpolate } from 'react-native-reanimated';
-import { forwardRef, useRef, useContext } from 'react';
+import { forwardRef, useRef, useContext, createElement } from 'react';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
 import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, extendObject } from './utils';
@@ -45,14 +45,16 @@ const _SwiperItem = forwardRef((props, ref) => {
             transform: transformStyle
         });
     });
-    return (<Animated.View {...innerProps} style={[innerStyle, layoutStyle, itemAnimatedStyle, customStyle]} data-itemId={props['item-id']}>
-      {wrapChildren(props, {
-            hasVarDec,
-            varContext: varContextRef.current,
-            textStyle,
-            textProps
-        })}
-    </Animated.View>);
+    const mergeProps = extendObject({}, innerProps, {
+        style: [innerStyle, layoutStyle, itemAnimatedStyle, customStyle],
+        'data-itemId': props['item-id']
+    });
+    return createElement(Animated.View, mergeProps, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    }));
 });
 _SwiperItem.displayName = 'MpxSwiperItem';
 export default _SwiperItem;

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

@@ -1,11 +1,12 @@
 import { View } from 'react-native';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS, useAnimatedReaction, cancelAnimation } from 'react-native-reanimated';
-import React, { forwardRef, useRef, useEffect, useMemo } from 'react';
+import React, { forwardRef, useRef, useEffect, useMemo, createElement } from 'react';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject } from './utils';
+import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject, flatGesture } from './utils';
 import { SwiperContext } from './context';
+import Portal from './mpx-portal';
 /**
  * 默认的Style类型
  */
@@ -70,14 +71,19 @@ 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': 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 easeingFunc = props['easing-function'] || 'default';
     const easeDuration = props.duration || 500;
     const horizontal = props.vertical !== undefined ? !props.vertical : true;
     const nodeRef = useRef(null);
-    useNodesRef(props, ref, nodeRef, {});
+    // 手势协同gesture 1.0
+    const swiperGestureRef = useRef();
+    useNodesRef(props, ref, nodeRef, {
+        // scrollView内部会过滤是否绑定了gestureRef，withRef(swiperGestureRef)给gesture对象设置一个ref(2.0版本)
+        gestureRef: swiperGestureRef
+    });
     // 计算transfrom之类的
-    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, {
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, {
         enableVar,
         externalVarContext,
         parentFontSize,
@@ -121,6 +127,23 @@ const SwiperWrapper = forwardRef((props, ref) => {
     const moveTime = useSharedValue(0);
     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 });
@@ -164,8 +187,6 @@ const SwiperWrapper = forwardRef((props, ref) => {
         }
     });
     function renderPagination() {
-        if (children.length <= 1)
-            return null;
         const activeColor = activeDotColor || '#007aff';
         const unActionColor = dotColor || 'rgba(0,0,0,.2)';
         // 正常渲染所有dots
@@ -490,6 +511,15 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 });
             }
         }
+        function handleBackInit() {
+            'worklet';
+            // 微信的效果
+            // 1. 只有一个元素，即使设置了circular，也不会产生循环的效果，2. 可以响应手势，但是会有回弹的效果
+            offset.value = withTiming(0, {
+                duration: easeDuration,
+                easing: easeMap[easeingFunc]
+            });
+        }
         function handleBack(eventData) {
             'worklet';
             const { translation } = eventData;
@@ -596,7 +626,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 return;
             }
             const { isBoundary, resetOffset } = reachBoundary(eventData);
-            if (isBoundary && circularShared.value) {
+            if (childrenLength.value > 1 && isBoundary && circularShared.value) {
                 offset.value = resetOffset;
             }
             else {
@@ -614,6 +644,9 @@ const SwiperWrapper = forwardRef((props, ref) => {
             const eventData = {
                 translation: moveDistance
             };
+            if (childrenLength.value === 1) {
+                return handleBackInit();
+            }
             // 用户手指按下起来, 需要计算正确的位置, 比如在滑动过程中突然按下然后起来,需要计算到正确的位置
             if (!circularShared.value && !canMove(eventData)) {
                 return;
@@ -625,11 +658,26 @@ const SwiperWrapper = forwardRef((props, ref) => {
             else {
                 handleEnd(eventData);
             }
-        });
+        })
+            .withRef(swiperGestureRef);
+        // swiper横向,当y轴滑动5像素手势失效；swiper纵向只响应swiper的滑动事件
+        if (dir === 'x') {
+            gesturePan.activeOffsetX([-2, 2]).failOffsetY([-5, 5]);
+        }
+        else {
+            gesturePan.activeOffsetY([-2, 2]).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 };
@@ -638,34 +686,32 @@ const SwiperWrapper = forwardRef((props, ref) => {
             return { transform: [{ translateY: offset.value }], opacity: step.value > 0 ? 1 : 0 };
         }
     });
-    function renderSwiper() {
-        const arrPages = renderItems();
-        return (<View style={[normalStyle, layoutStyle, styles.swiper]} {...layoutProps} {...innerProps}>
-      <Animated.View style={[{
-                    flexDirection: dir === 'x' ? 'row' : 'column',
-                    width: '100%',
-                    height: '100%'
-                }, animatedStyles]}>
-        {wrapChildren({
-                children: arrPages
-            }, {
-                hasVarDec,
-                varContext: varContextRef.current,
-                textStyle,
-                textProps
-            })}
-      </Animated.View>
-      {showsPagination && renderPagination()}
-    </View>);
-    }
-    if (children.length === 1) {
-        return renderSwiper();
+    let finalComponent;
+    const arrPages = renderItems();
+    const mergeProps = Object.assign({
+        style: [normalStyle, layoutStyle, styles.swiper]
+    }, layoutProps, innerProps);
+    const animateComponent = createElement(Animated.View, {
+        style: [{ flexDirection: dir === 'x' ? 'row' : 'column', width: '100%', height: '100%' }, animatedStyles]
+    }, wrapChildren({
+        children: arrPages
+    }, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    }));
+    const renderChildrens = showPagination ? [animateComponent, renderPagination()] : animateComponent;
+    finalComponent = createElement(View, mergeProps, renderChildrens);
+    if (!disableGesture) {
+        finalComponent = createElement(GestureDetector, {
+            gesture: gestureHandler
+        }, finalComponent);
     }
-    else {
-        return (<GestureDetector gesture={gestureHandler}>
-      {renderSwiper()}
-    </GestureDetector>);
+    if (hasPositionFixed) {
+        finalComponent = createElement(Portal, null, finalComponent);
     }
+    return finalComponent;
 });
 SwiperWrapper.displayName = 'MpxSwiperWrapper';
 export default SwiperWrapper;

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,
@@ -83,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

@@ -5,12 +5,13 @@
  */
 import { Text } from 'react-native';
 import { useRef, forwardRef, createElement } from 'react';
+import Portal from './mpx-portal';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
 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 { normalStyle, hasVarDec, varContextRef } = useTransformStyle(style, {
+    const { normalStyle, hasVarDec, varContextRef, hasPositionFixed } = useTransformStyle(style, {
         enableVar,
         externalVarContext,
         parentFontSize,
@@ -29,10 +30,14 @@ const _Text = forwardRef((props, ref) => {
     }), [
         'user-select'
     ]);
-    return createElement(Text, innerProps, wrapChildren(props, {
+    let finalComponent = createElement(Text, innerProps, wrapChildren(props, {
         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

@@ -68,6 +68,7 @@ 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,
@@ -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

@@ -523,10 +523,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, {