@mpxjs/webpack-plugin 2.9.69-beta.0 → 2.9.69-beta.10

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

@@ -1,8 +1,7 @@
 import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react';
-import { Platform, SafeAreaView, StyleSheet } from 'react-native';
+import { SafeAreaView, StyleSheet } from 'react-native';
 import Reanimated, { useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated';
-import { vibrateShort } from '@mpxjs/api-proxy';
-import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious } from './utils';
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS, useDebounceCallback, useStableCallback } from './utils';
 import useNodesRef from './useNodesRef';
 import PickerOverlay from './pickerViewOverlay';
 import PickerMask from './pickerViewMask';
@@ -21,14 +20,12 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         style: normalStyle
     });
     const { height: pickerH, itemHeight } = wrapperStyle;
-    const [scrollViewWidth, setScrollViewWidth] = useState('100%');
-    const [itemRawW, setItemRawW] = useState('100%');
     const [itemRawH, setItemRawH] = useState(itemHeight);
     const maxIndex = useMemo(() => columnData.length - 1, [columnData]);
-    const maxScrollViewWidth = useRef(-1);
     const prevScrollingInfo = useRef({ index: initialIndex, y: 0 });
     const touching = useRef(false);
     const scrolling = useRef(false);
+    const timerScrollTo = useRef(null);
     const activeIndex = useRef(initialIndex);
     const prevIndex = usePrevious(initialIndex);
     const prevMaxIndex = usePrevious(maxIndex);
@@ -39,13 +36,9 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         setHeight,
         nodeRef: scrollViewRef
     });
-    // console.log('[mpx-picker-view-column], render ---> columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'columnData=', columnData.length)
-    // const initialOffset = useMemo(() => ({
-    //   x: 0,
-    //   y: itemRawH * initialIndex
-    // }), [itemRawH])
+    // console.log('[mpx-picker-view-column], render ---> columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'columnData=', columnData.length, 'pickerH=', pickerH, 'itemRawH=', itemRawH, 'itemHeight=', itemHeight)
+    const paddingHeight = useMemo(() => Math.round((pickerH - itemHeight) / 2), [pickerH, itemHeight]);
     const snapToOffsets = useMemo(() => columnData.map((_, i) => i * itemRawH), [columnData, itemRawH]);
-    const paddingHeight = useMemo(() => Math.round((pickerH - itemRawH) / 2), [pickerH, itemRawH]);
     const contentContainerStyle = useMemo(() => {
         return [{ paddingVertical: paddingHeight }];
     }, [paddingHeight]);
@@ -53,6 +46,37 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         const calc = Math.round(y / itemRawH);
         return Math.max(0, Math.min(calc, maxIndex));
     }, [itemRawH, maxIndex]);
+    const getYofIndex = useCallback((index) => {
+        return index * itemRawH;
+    }, [itemRawH]);
+    const stableResetScrollPosition = useStableCallback((y) => {
+        // console.log('[mpx-picker-view-column], reset --->', 'columnIndex=', columnIndex, 'y=', y, touching.current, scrolling.current, itemRawH, 'snapToOffsets=', snapToOffsets)
+        if (touching.current || scrolling.current) {
+            return;
+        }
+        // needReset.current = true
+        if (y % itemRawH !== 0) {
+            scrolling.current = true;
+            const targetIndex = getIndex(y);
+            const targetY = getYofIndex(targetIndex);
+            scrollViewRef.current?.scrollTo({ x: 0, y: targetY, animated: false });
+        }
+        else {
+            onMomentumScrollEnd({ nativeEvent: { contentOffset: { y } } });
+        }
+    });
+    const debounceResetScrollPosition = useDebounceCallback(stableResetScrollPosition, 10);
+    const clearTimerScrollTo = () => {
+        if (timerScrollTo.current) {
+            clearTimeout(timerScrollTo.current);
+            timerScrollTo.current = null;
+        }
+    };
+    useEffect(() => {
+        return () => {
+            clearTimerScrollTo();
+        };
+    }, []);
     useEffect(() => {
         if (!scrollViewRef.current ||
             !itemRawH ||
@@ -64,80 +88,70 @@ const _PickerViewColumn = forwardRef((props, ref) => {
             maxIndex !== prevMaxIndex) {
             return;
         }
-        // console.log('[mpx-picker-view-column], useEffect ---> columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'y=', itemRawH * initialIndex, `${scrollViewRef.current?.scrollTo}`)
-        setTimeout(() => {
+        clearTimerScrollTo();
+        timerScrollTo.current = setTimeout(() => {
             scrollViewRef.current?.scrollTo({
                 x: 0,
-                y: itemRawH * initialIndex,
+                y: getYofIndex(initialIndex),
                 animated: false
             });
-        }, 0);
+        }, isAndroid ? 200 : 0);
         activeIndex.current = initialIndex;
     }, [itemRawH, initialIndex]);
     const onContentSizeChange = (_w, h) => {
-        const y = itemRawH * initialIndex;
-        // console.log('[mpx-picker-view-column], onContentSizeChange --->', 'columnIndex=', columnIndex, '_w=', _w, 'h=', h, 'y=', y)
+        const y = getYofIndex(initialIndex);
         if (y <= h) {
-            setTimeout(() => {
+            clearTimerScrollTo();
+            timerScrollTo.current = setTimeout(() => {
                 scrollViewRef.current?.scrollTo({ x: 0, y, animated: false });
             }, 0);
         }
     };
-    const onScrollViewLayout = (e) => {
-        const { width } = e.nativeEvent.layout;
-        const widthInt = Math.ceil(width);
-        // console.log('[mpx-picker-view-column], onScrollViewLayout --->', 'columnIndex=', columnIndex, 'widthInt=', widthInt, 'scrollViewWidth=', scrollViewWidth)
-        if (widthInt !== scrollViewWidth) {
-            const maxW = maxScrollViewWidth.current;
-            if (maxW !== -1 && widthInt > maxW) {
-                return;
-            }
-            if (maxW === -1) {
-                maxScrollViewWidth.current = Math.ceil(widthInt * 1.5);
-            }
-            setScrollViewWidth(widthInt);
-        }
-        if (itemRawW === '100%') {
-            setItemRawW(widthInt);
-        }
-    };
     const onItemLayout = (e) => {
         const { height: rawH } = e.nativeEvent.layout;
-        if (rawH && itemRawH !== rawH) {
-            setItemRawH(rawH);
+        const roundedH = Math.round(rawH);
+        if (roundedH && roundedH !== itemRawH) {
+            setItemRawH(roundedH);
         }
     };
-    const onTouchStart = () => {
+    const onScrollBeginDrag = () => {
+        isIOS && debounceResetScrollPosition.clear();
         touching.current = true;
         prevScrollingInfo.current = {
             index: activeIndex.current,
-            y: activeIndex.current * itemRawH
+            y: getYofIndex(activeIndex.current)
         };
     };
-    const onTouchEnd = () => {
-        touching.current = false;
-    };
-    const onTouchCancel = () => {
+    const onScrollEndDrag = (e) => {
         touching.current = false;
+        const { y } = e.nativeEvent.contentOffset;
+        if (isIOS) {
+            if (y >= 0 && y <= snapToOffsets[maxIndex]) {
+                debounceResetScrollPosition(y);
+            }
+        }
     };
     const onMomentumScrollBegin = () => {
+        isIOS && debounceResetScrollPosition.clear();
         scrolling.current = true;
     };
     const onMomentumScrollEnd = (e) => {
         scrolling.current = false;
-        if (!itemRawH) {
-            return;
-        }
         const { y: scrollY } = e.nativeEvent.contentOffset;
-        let calcIndex = Math.round(scrollY / itemRawH);
-        activeIndex.current = calcIndex;
-        if (calcIndex !== initialIndex) {
-            calcIndex = Math.max(0, Math.min(calcIndex, maxIndex)) || 0;
+        // console.log('[mpx-picker-view-column], onMomentumScrollEnd --->', 'columnIndex=', columnIndex, scrollY, itemRawH)
+        if (isIOS && scrollY % itemRawH !== 0) {
+            return debounceResetScrollPosition(scrollY);
+        }
+        const calcIndex = getIndex(scrollY);
+        if (calcIndex !== activeIndex.current) {
+            activeIndex.current = calcIndex;
             onSelectChange(calcIndex);
         }
     };
     const onScroll = (e) => {
-        if (Platform.OS === 'android') {
+        // 全局注册的振动触感 hook
+        const pickerVibrate = global.__mpx?.config?.rnConfig?.pickerVibrate;
+        if (typeof pickerVibrate !== 'function') {
             return;
         }
         const { y } = e.nativeEvent.contentOffset;
@@ -148,19 +162,20 @@ const _PickerViewColumn = forwardRef((props, ref) => {
                 if (currentId !== prevIndex) {
                     prevScrollingInfo.current = {
                         index: currentId,
-                        y: currentId * itemRawH
+                        y: getYofIndex(currentId)
                     };
-                    vibrateShort({ type: 'selection' });
+                    // vibrateShort({ type: 'selection' })
+                    pickerVibrate();
                 }
             }
         }
     };
     const renderInnerchild = () => columnData.map((item, index) => {
-        return (<MpxPickerVIewColumnItem key={index} item={item} index={index} itemHeight={itemHeight} itemWidth={itemRawW} textStyleFromParent={textStyleFromParent} textStyle={textStyle} hasVarDec={hasVarDec} varContext={varContextRef.current} textProps={textProps} visibleCount={visibleCount} onItemLayout={onItemLayout}/>);
+        return (<MpxPickerVIewColumnItem key={index} item={item} index={index} itemHeight={itemHeight} textStyleFromParent={textStyleFromParent} textStyle={textStyle} hasVarDec={hasVarDec} varContext={varContextRef.current} textProps={textProps} visibleCount={visibleCount} onItemLayout={onItemLayout}/>);
     });
     const renderScollView = () => {
         return (<PickerViewColumnAnimationContext.Provider value={offsetYShared}>
-        <Reanimated.ScrollView ref={scrollViewRef} bounces={true} horizontal={false} nestedScrollEnabled={true} removeClippedSubviews={false} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} scrollEventThrottle={16} {...layoutProps} style={[{ width: scrollViewWidth }]} decelerationRate="fast" snapToOffsets={snapToOffsets} onScroll={onScroll} onLayout={onScrollViewLayout} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} onTouchCancel={onTouchCancel} onMomentumScrollBegin={onMomentumScrollBegin} onMomentumScrollEnd={onMomentumScrollEnd} onContentSizeChange={onContentSizeChange} contentContainerStyle={contentContainerStyle}>
+        <Reanimated.ScrollView ref={scrollViewRef} bounces={true} horizontal={false} nestedScrollEnabled={true} removeClippedSubviews={false} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} scrollEventThrottle={16} {...layoutProps} style={[{ width: '100%' }]} decelerationRate="fast" snapToOffsets={snapToOffsets} onScroll={onScroll} onScrollBeginDrag={onScrollBeginDrag} onScrollEndDrag={onScrollEndDrag} onMomentumScrollBegin={onMomentumScrollBegin} onMomentumScrollEnd={onMomentumScrollEnd} onContentSizeChange={onContentSizeChange} contentContainerStyle={contentContainerStyle}>
           {renderInnerchild()}
         </Reanimated.ScrollView>
       </PickerViewColumnAnimationContext.Provider>);

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

@@ -45,7 +45,7 @@ const _PickerView = forwardRef((props, ref) => {
     };
     const onInitialChange = (isInvalid, value) => {
         if (isInvalid || !snapActiveValueRef.current || hasDiff(snapActiveValueRef.current, value)) {
-            console.log('[mpx-picker-view], onInitialChange-1 ===> value=', value);
+            console.log('[mpx-picker-view], onInitialChange ===> value=', value);
             const eventData = getCustomEvent('change', {}, { detail: { value, source: 'change' }, layoutRef });
             bindchange?.(eventData);
             snapActiveValueRef.current = value.slice();

package/lib/runtime/components/react/dist/mpx-portal/portal-consumer.jsx

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from 'react';
+import { getFocusedNavigation } from '@mpxjs/utils';
+const PortalConsumer = ({ manager, children }) => {
+    const keyRef = useRef(null);
+    useEffect(() => {
+        const navigation = getFocusedNavigation();
+        const curPageId = navigation?.pageId;
+        manager.update(keyRef.current, children, curPageId);
+    }, [children]);
+    useEffect(() => {
+        if (!manager) {
+            throw new Error('Looks like you forgot to wrap your root component with `Provider` component from `@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal`.\n\n');
+        }
+        const navigation = getFocusedNavigation();
+        const curPageId = navigation?.pageId;
+        keyRef.current = manager.mount(children, undefined, curPageId);
+        return () => {
+            manager.unmount(keyRef.current);
+        };
+    }, []);
+    return null;
+};
+export default PortalConsumer;

package/lib/runtime/components/react/dist/mpx-portal/portal-host.jsx

@@ -0,0 +1,93 @@
+import { useEffect, useRef } from 'react';
+import { View, DeviceEventEmitter, NativeEventEmitter, StyleSheet } from 'react-native';
+import PortalManager from './portal-manager';
+import { getFocusedNavigation } from '@mpxjs/utils';
+import { PortalContext } from '../context';
+// events
+const addType = 'MPX_RN_ADD_PORTAL';
+const removeType = 'MPX_RN_REMOVE_PORTAL';
+const updateType = 'MPX_RN_UPDATE_PORTAL';
+// fix react native web does not support DeviceEventEmitter
+const TopViewEventEmitter = DeviceEventEmitter || new NativeEventEmitter();
+const styles = StyleSheet.create({
+    container: {
+        flex: 1
+    }
+});
+class PortalGuard {
+    nextKey = 10000;
+    add = (e) => {
+        const key = this.nextKey++;
+        TopViewEventEmitter.emit(addType, e, key);
+        return key;
+    };
+    remove = (key) => {
+        TopViewEventEmitter.emit(removeType, key);
+    };
+    update = (key, e) => {
+        TopViewEventEmitter.emit(updateType, key, e);
+    };
+}
+/**
+ * portal
+ */
+export const portal = new PortalGuard();
+const PortalHost = ({ children }) => {
+    const _nextKey = useRef(0);
+    const _queue = useRef([]);
+    const _addType = useRef(null);
+    const _removeType = useRef(null);
+    const _updateType = useRef(null);
+    const manager = useRef(null);
+    let currentPageId;
+    const _mount = (children, _key, curPageId) => {
+        const navigation = getFocusedNavigation();
+        const pageId = navigation?.pageId;
+        if (pageId !== (curPageId ?? currentPageId)) {
+            return;
+        }
+        const key = _key || _nextKey.current++;
+        if (manager.current) {
+            manager.current.mount(key, children);
+        }
+        return key;
+    };
+    const _unmount = (key) => {
+        if (manager.current) {
+            manager.current.unmount(key);
+        }
+    };
+    const _update = (key, children, curPageId) => {
+        const navigation = getFocusedNavigation();
+        const pageId = navigation?.pageId;
+        if (pageId !== (curPageId ?? currentPageId)) {
+            return;
+        }
+        if (manager.current) {
+            manager.current.update(key, children);
+        }
+    };
+    useEffect(() => {
+        const navigation = getFocusedNavigation();
+        currentPageId = navigation?.pageId;
+        _addType.current = TopViewEventEmitter.addListener(addType, _mount);
+        _removeType.current = TopViewEventEmitter.addListener(removeType, _unmount);
+        _updateType.current = TopViewEventEmitter.addListener(updateType, _update);
+        return () => {
+            _addType.current?.remove();
+            _removeType.current?.remove();
+            _updateType.current?.remove();
+        };
+    }, []);
+    return (<PortalContext.Provider value={{
+            mount: _mount,
+            update: _update,
+            unmount: _unmount
+        }}>
+      <View style={styles.container} collapsable={false}>
+        {children}
+      </View>
+      <PortalManager ref={manager}/>
+    </PortalContext.Provider>);
+};
+export default PortalHost;

package/lib/runtime/components/react/dist/mpx-portal/portal-manager.jsx

@@ -0,0 +1,40 @@
+import { useState, useCallback, forwardRef, useImperativeHandle } from 'react';
+import { View, StyleSheet } from 'react-native';
+const _PortalManager = forwardRef((props, ref) => {
+    const [state, setState] = useState({
+        portals: []
+    });
+    const mount = useCallback((key, children) => {
+        setState((prevState) => ({
+            portals: [...prevState.portals, { key, children }]
+        }));
+    }, [state]);
+    const update = useCallback((key, children) => {
+        setState((prevState) => ({
+            portals: prevState.portals.map((item) => {
+                if (item.key === key) {
+                    return { ...item, children };
+                }
+                return item;
+            })
+        }));
+    }, [state]);
+    const unmount = useCallback((key) => {
+        setState((prevState) => ({
+            portals: prevState.portals.filter((item) => item.key !== key)
+        }));
+    }, []);
+    useImperativeHandle(ref, () => ({
+        mount,
+        update,
+        unmount,
+        portals: state.portals
+    }));
+    return (<>
+      {state.portals.map(({ key, children }, i) => (<View key={key} collapsable={false} // Need collapsable=false here to clip the elevations
+         pointerEvents="box-none" style={[StyleSheet.absoluteFill, { zIndex: 1000 + i }]}>
+          {children}
+        </View>))}
+    </>);
+});
+export default _PortalManager;

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

@@ -0,0 +1,13 @@
+import { PortalContext } from './context';
+import PortalConsumer from './mpx-portal/portal-consumer';
+import PortalHost, { portal } from './mpx-portal/portal-host';
+const Portal = ({ children }) => {
+    return (<PortalContext.Consumer>
+      {(manager) => (<PortalConsumer manager={manager}>{children}</PortalConsumer>)}
+    </PortalContext.Consumer>);
+};
+Portal.Host = PortalHost;
+Portal.add = portal.add;
+Portal.remove = portal.remove;
+Portal.update = portal.update;
+export default Portal;

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

@@ -0,0 +1,31 @@
+import { createContext, useMemo } from 'react';
+import LocaleProvider from './locale-provider';
+import Portal from './mpx-portal';
+import { extendObject } from './utils';
+const defaultTheme = {
+    color_text_base: '#000000',
+    color_text_base_inverse: '#ffffff',
+    color_text_secondary: '#a4a9b0',
+    color_text_placeholder: '#bbbbbb',
+    color_text_disabled: '#bbbbbb',
+    color_text_caption: '#888888',
+    color_text_paragraph: '#333333',
+    color_error: '#ff4d4f',
+    color_warning: '#faad14',
+    color_success: '#52c41a',
+    color_primary: '#1677ff'
+};
+export const ThemeContext = createContext(defaultTheme);
+const ThemeProvider = (props) => {
+    const { value, children } = props;
+    const theme = useMemo(() => (extendObject({}, defaultTheme, value)), [value]);
+    return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
+};
+const Provider = ({ locale, theme, children }) => {
+    return (<LocaleProvider locale={locale}>
+      <ThemeProvider value={theme}>
+        <Portal.Host>{children}</Portal.Host>
+      </ThemeProvider>
+    </LocaleProvider>);
+};
+export default Provider;

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

@@ -2,10 +2,10 @@
  * ✔ nodes
  */
 import { View } from 'react-native';
-import { useRef, forwardRef, useState } from 'react';
+import { useRef, forwardRef, useState, createElement } from 'react';
 import useInnerProps from '../getInnerListeners';
 import useNodesRef from '../useNodesRef'; // 引入辅助函数
-import { useTransformStyle, useLayout } from '../utils';
+import { useTransformStyle, useLayout, extendObject } from '../utils';
 import { WebView } from 'react-native-webview';
 import { generateHTML } from './html';
 function jsonToHtmlStr(elements) {
@@ -44,20 +44,19 @@ const _RichText = forwardRef((props, ref) => {
     useNodesRef(props, ref, nodeRef, {
         layoutRef
     });
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: { ...normalStyle, ...layoutStyle },
-        ...layoutProps
-    }, [], {
+        style: extendObject(normalStyle, layoutStyle)
+    }, layoutProps), [], {
         layoutRef
     });
     const html = typeof nodes === 'string' ? nodes : jsonToHtmlStr(nodes);
-    return (<View {...innerProps}>
-      <WebView source={{ html: generateHTML(html) }} onMessage={(event) => {
+    return createElement(View, innerProps, createElement(WebView, {
+        source: { html: generateHTML(html) },
+        onMessage: (event) => {
             setWebViewHeight(+event.nativeEvent.data);
-        }}>
-      </WebView>
-    </View>);
+        }
+    }));
 });
 _RichText.displayName = 'mpx-rich-text';
 export default _RichText;

package/lib/runtime/components/react/dist/mpx-root-portal.jsx

@@ -2,7 +2,7 @@
  * ✔ enable
  */
 import { createElement, Fragment } from 'react';
-import { Portal } from '@ant-design/react-native';
+import Portal from './mpx-portal';
 import { warn } from '@mpxjs/utils';
 const _RootPortal = (props) => {
     const { children, enable = true } = props;

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

@@ -33,13 +33,13 @@
  */
 import { ScrollView } from 'react-native-gesture-handler';
 import { RefreshControl } from 'react-native';
-import { useRef, useState, useEffect, forwardRef, useContext, createElement } from 'react';
+import { useRef, useState, useEffect, forwardRef, useContext, createElement, useMemo } from 'react';
 import { useAnimatedRef } from 'react-native-reanimated';
 import { warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture } from './utils';
-import { IntersectionObserverContext } from './context';
+import { IntersectionObserverContext, ScrollViewContext } from './context';
 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, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, '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, __selectRef } = props;
@@ -78,6 +78,11 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         },
         gestureRef: scrollViewRef
     });
+    const contextValue = useMemo(() => {
+        return {
+            gestureRef: scrollViewRef
+        };
+    }, []);
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout });
     if (scrollX && scrollY) {
         warn('scroll-x and scroll-y cannot be set to true at the same time, Mpx will use the value of scroll-y as the criterion');
@@ -196,11 +201,6 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
                 layoutRef
             }, props));
         updateScrollOptions(e, { scrollLeft, scrollTop });
-        if (enableTriggerIntersectionObserver && intersectionObservers) {
-            for (const key in intersectionObservers) {
-                intersectionObservers[key].throttleMeasure();
-            }
-        }
     }
     function onScrollEnd(e) {
         const { bindscrollend } = props;
@@ -219,6 +219,14 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         updateScrollOptions(e, { scrollLeft, scrollTop });
         onStartReached(e);
         onEndReached(e);
+        updateIntersection();
+    }
+    function updateIntersection() {
+        if (enableTriggerIntersectionObserver && intersectionObservers) {
+            for (const key in intersectionObservers) {
+                intersectionObservers[key].throttleMeasure();
+            }
+        }
     }
     function scrollToOffset(x = 0, y = 0) {
         if (scrollViewRef.current) {
@@ -277,6 +285,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     function onScrollDrag(e) {
         const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
         updateScrollOptions(e, { scrollLeft, scrollTop });
+        updateIntersection();
     }
     const scrollAdditionalProps = extendObject({
         style: extendObject({}, innerStyle, layoutStyle),
@@ -342,12 +351,12 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
                 onRefresh: onRefresh
             }, (refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : null)))
             : undefined
-    }), wrapChildren(props, {
+    }), createElement(ScrollViewContext.Provider, { value: contextValue }, wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current,
         textStyle,
         textProps
-    }));
+    })));
 });
 _ScrollView.displayName = 'MpxScrollView';
 export default _ScrollView;

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

@@ -1,10 +1,16 @@
-import { View } from 'react-native';
-import { forwardRef, useRef } from 'react';
+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 { SwiperContext } from './context';
 const _SwiperItem = forwardRef((props, ref) => {
-    const { 'enable-var': enableVar, 'external-var-context': externalVarContext, style } = props;
+    const { 'enable-var': enableVar, 'external-var-context': externalVarContext, style, customStyle, itemIndex } = props;
+    const contextValue = useContext(SwiperContext);
+    const offset = contextValue.offset || 0;
+    const step = contextValue.step || 0;
+    const scale = contextValue.scale || false;
+    const dir = contextValue.dir || 'x';
     const { textProps } = splitProps(props);
     const nodeRef = useRef(null);
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
@@ -16,21 +22,38 @@ const _SwiperItem = forwardRef((props, ref) => {
     // 存储layout布局信息
     layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef });
     const innerProps = useInnerProps(props, {
-        style: { ...innerStyle, ...layoutStyle },
         ref: nodeRef,
         ...layoutProps
     }, [
         'children',
-        'enable-offset'
+        'enable-offset',
+        'style'
     ], { layoutRef });
-    return (<View data-itemId={props['item-id']} {...innerProps}>
-       {wrapChildren(props, {
+    const itemAnimatedStyle = useAnimatedStyle(() => {
+        if (!step.value)
+            return {};
+        const inputRange = [step.value, 0];
+        const outputRange = [0.7, 1];
+        // 实现元素的宽度跟随step从0到真实宽度，且不能触发重新渲染整个组件，通过AnimatedStyle的方式实现
+        const outerLayoutStyle = dir === 'x' ? { width: step.value, height: '100%' } : { width: '100%', height: step.value };
+        const transformStyle = [];
+        if (scale) {
+            transformStyle.push({
+                scale: interpolate(Math.abs(Math.abs(offset.value) - itemIndex * step.value), inputRange, outputRange)
+            });
+        }
+        return Object.assign(outerLayoutStyle, {
+            transform: transformStyle
+        });
+    });
+    return (<Animated.View {...innerProps} style={[innerStyle, layoutStyle, itemAnimatedStyle, customStyle]} data-itemId={props['item-id']}>
+      {wrapChildren(props, {
             hasVarDec,
             varContext: varContextRef.current,
             textStyle,
             textProps
         })}
-    </View>);
+    </Animated.View>);
 });
 _SwiperItem.displayName = 'MpxSwiperItem';
 export default _SwiperItem;