@mpxjs/webpack-plugin 2.9.70 → 2.9.71

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

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react';
+import Reanimated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import { extendObject } from './utils';
+import { createFaces } from './pickerFaces';
+import { usePickerViewColumnAnimationContext, usePickerViewStyleContext } from './pickerVIewContext';
+const PickerViewColumnItem = ({ item, index, itemHeight, itemWidth = '100%', textStyle, textProps, visibleCount, onItemLayout }) => {
+    const textStyleFromAncestor = usePickerViewStyleContext();
+    const offsetYShared = usePickerViewColumnAnimationContext();
+    const facesShared = useSharedValue(createFaces(itemHeight, visibleCount));
+    useEffect(() => {
+        facesShared.value = createFaces(itemHeight, visibleCount);
+    }, [itemHeight]);
+    const animatedStyles = useAnimatedStyle(() => {
+        const inputRange = facesShared.value.map((f) => itemHeight * (index + f.index));
+        return {
+            opacity: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.opacity), Extrapolation.CLAMP),
+            transform: [
+                { translateY: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.offsetY), Extrapolation.EXTEND) },
+                { rotateX: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
+                { scale: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.scale), Extrapolation.EXTEND) }
+            ]
+        };
+    });
+    const strKey = `picker-column-item-${index}`;
+    const restProps = index === 0 ? { onLayout: onItemLayout } : {};
+    const itemProps = extendObject({
+        style: extendObject({ height: itemHeight, width: '100%' }, textStyleFromAncestor, textStyle, item.props.style)
+    }, textProps, restProps);
+    const realItem = React.cloneElement(item, itemProps);
+    return (<Reanimated.View key={strKey} style={[{ height: itemHeight, width: itemWidth }, animatedStyles]}>
+      {realItem}
+    </Reanimated.View>);
+};
+PickerViewColumnItem.displayName = 'MpxPickerViewColumnItem';
+export default PickerViewColumnItem;

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

@@ -1,42 +1,68 @@
-import { Animated, SafeAreaView } from 'react-native';
-import React, { forwardRef, useRef, useState, useMemo, useCallback, useEffect } from 'react';
-import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, usePrevious } from './utils';
+import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Reanimated, { useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated';
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS } from './utils';
 import useNodesRef from './useNodesRef';
-import { createFaces } from './pickerFaces';
-import PickerOverlay from './pickerOverlay';
-// 默认的单个选项高度
-const DefaultPickerItemH = 36;
-// 默认一屏可见选项个数
+import PickerIndicator from './pickerViewIndicator';
+import PickerMask from './pickerViewMask';
+import MpxPickerVIewColumnItem from './mpx-picker-view-column-item';
+import { PickerViewColumnAnimationContext } from './pickerVIewContext';
 const visibleCount = 5;
 const _PickerViewColumn = forwardRef((props, ref) => {
-    const { columnData, columnIndex, initialIndex, onSelectChange, onColumnItemRawHChange, getInnerLayout, style, wrapperStyle, pickerOverlayStyle, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
-    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
-    const { textStyle } = splitStyle(normalStyle);
-    const { textProps } = splitProps(props);
-    const scrollViewRef = useRef(null);
+    const { columnData, columnIndex, initialIndex, onSelectChange, style, wrapperStyle, pickerMaskStyle, pickerIndicatorStyle, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
+    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
+    const { textStyle = {} } = splitStyle(normalStyle);
+    const { textProps = {} } = splitProps(props);
+    const scrollViewRef = useAnimatedRef();
+    const offsetYShared = useScrollViewOffset(scrollViewRef);
     useNodesRef(props, ref, scrollViewRef, {
         style: normalStyle
     });
-    const { height: pickerH, itemHeight = DefaultPickerItemH } = wrapperStyle;
-    const [itemRawH, setItemRawH] = useState(0); // 单个选项真实渲染高度
+    const { height: pickerH, itemHeight } = wrapperStyle;
+    const [itemRawH, setItemRawH] = useState(itemHeight);
     const maxIndex = useMemo(() => columnData.length - 1, [columnData]);
+    const prevScrollingInfo = useRef({ index: initialIndex, y: 0 });
     const touching = useRef(false);
     const scrolling = useRef(false);
+    const timerResetPosition = useRef(null);
+    const timerScrollTo = useRef(null);
     const activeIndex = useRef(initialIndex);
     const prevIndex = usePrevious(initialIndex);
     const prevMaxIndex = usePrevious(maxIndex);
-    const initialOffset = useMemo(() => ({
-        x: 0,
-        y: itemRawH * initialIndex
-    }), [itemRawH]);
-    const snapToOffsets = useMemo(() => columnData.map((_, i) => i * itemRawH), [columnData, itemRawH]);
+    const { layoutProps } = useLayout({
+        props,
+        hasSelfPercent,
+        setWidth,
+        setHeight,
+        nodeRef: scrollViewRef
+    });
+    const paddingHeight = useMemo(() => Math.round((pickerH - itemHeight) / 2), [pickerH, itemHeight]);
+    const snapToOffsets = useMemo(() => Array.from({ length: maxIndex + 1 }, (_, i) => i * itemRawH), [maxIndex, itemRawH]);
     const contentContainerStyle = useMemo(() => {
-        return [
-            {
-                paddingVertical: Math.round(pickerH - itemRawH) / 2
-            }
-        ];
-    }, [pickerH, itemRawH]);
+        return [{ paddingVertical: paddingHeight }];
+    }, [paddingHeight]);
+    const getIndex = useCallback((y) => {
+        const calc = Math.round(y / itemRawH);
+        return Math.max(0, Math.min(calc, maxIndex));
+    }, [itemRawH, maxIndex]);
+    const clearTimerResetPosition = useCallback(() => {
+        if (timerResetPosition.current) {
+            clearTimeout(timerResetPosition.current);
+            timerResetPosition.current = null;
+        }
+    }, []);
+    const clearTimerScrollTo = useCallback(() => {
+        if (timerScrollTo.current) {
+            clearTimeout(timerScrollTo.current);
+            timerScrollTo.current = null;
+        }
+    }, []);
+    useEffect(() => {
+        return () => {
+            clearTimerResetPosition();
+            clearTimerScrollTo();
+        };
+    }, []);
     useEffect(() => {
         if (!scrollViewRef.current ||
             !itemRawH ||
@@ -48,122 +74,120 @@ const _PickerViewColumn = forwardRef((props, ref) => {
             maxIndex !== prevMaxIndex) {
             return;
         }
+        clearTimerScrollTo();
+        timerScrollTo.current = setTimeout(() => {
+            scrollViewRef.current?.scrollTo({
+                x: 0,
+                y: initialIndex * itemRawH,
+                animated: false
+            });
+        }, isAndroid ? 200 : 0);
         activeIndex.current = initialIndex;
-        scrollViewRef.current.scrollTo({
-            x: 0,
-            y: itemRawH * initialIndex,
-            animated: false
-        });
+    }, [itemRawH, maxIndex, initialIndex]);
+    const onContentSizeChange = useCallback((_w, h) => {
+        const y = initialIndex * itemRawH;
+        if (y <= h) {
+            clearTimerScrollTo();
+            timerScrollTo.current = setTimeout(() => {
+                scrollViewRef.current?.scrollTo({ x: 0, y, animated: false });
+            }, 0);
+        }
     }, [itemRawH, initialIndex]);
-    const onScrollViewLayout = () => {
-        getInnerLayout && getInnerLayout(layoutRef);
-    };
-    const { layoutRef, layoutProps } = useLayout({
-        props,
-        hasSelfPercent,
-        setWidth,
-        setHeight,
-        nodeRef: scrollViewRef,
-        onLayout: onScrollViewLayout
-    });
-    const onContentSizeChange = (w, h) => {
-        scrollViewRef.current?.scrollTo({
-            x: 0,
-            y: itemRawH * initialIndex,
-            animated: false
-        });
-    };
-    const onItemLayout = (e) => {
+    const onItemLayout = useCallback((e) => {
         const { height: rawH } = e.nativeEvent.layout;
-        if (rawH && itemRawH !== rawH) {
-            setItemRawH(rawH);
-            onColumnItemRawHChange(rawH);
+        const roundedH = Math.round(rawH);
+        if (roundedH && roundedH !== itemRawH) {
+            setItemRawH(roundedH);
         }
-    };
-    const onTouchStart = () => {
-        touching.current = true;
-    };
-    const onTouchEnd = () => {
-        touching.current = false;
-    };
-    const onTouchCancel = () => {
-        touching.current = false;
-    };
-    const onMomentumScrollBegin = () => {
-        scrolling.current = true;
-    };
-    const onMomentumScrollEnd = (e) => {
-        scrolling.current = false;
-        if (!itemRawH) {
+    }, [itemRawH]);
+    const resetScrollPosition = useCallback((y) => {
+        if (touching.current || scrolling.current) {
             return;
         }
+        scrolling.current = true;
+        const targetIndex = getIndex(y);
+        scrollViewRef.current?.scrollTo({ x: 0, y: targetIndex * itemRawH, animated: false });
+    }, [itemRawH, getIndex]);
+    const onMomentumScrollBegin = useCallback(() => {
+        isIOS && clearTimerResetPosition();
+        scrolling.current = true;
+    }, []);
+    const onMomentumScrollEnd = useCallback((e) => {
+        scrolling.current = false;
         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;
+        if (isIOS && scrollY % itemRawH !== 0) {
+            return resetScrollPosition(scrollY);
+        }
+        const calcIndex = getIndex(scrollY);
+        if (calcIndex !== activeIndex.current) {
+            activeIndex.current = calcIndex;
             onSelectChange(calcIndex);
         }
-    };
-    const offsetY = useRef(new Animated.Value(0)).current;
-    const onScroll = useMemo(() => Animated.event([{ nativeEvent: { contentOffset: { y: offsetY } } }], {
-        useNativeDriver: true
-    }), [offsetY]);
-    const faces = useMemo(() => createFaces(itemRawH, visibleCount), [itemRawH]);
-    const getTransform = useCallback((index) => {
-        const inputRange = faces.map((f) => itemRawH * (index + f.index));
-        return {
-            opacity: offsetY.interpolate({
-                inputRange: inputRange,
-                outputRange: faces.map((x) => x.opacity),
-                extrapolate: 'clamp'
-            }),
-            rotateX: offsetY.interpolate({
-                inputRange: inputRange,
-                outputRange: faces.map((x) => `${x.deg}deg`),
-                extrapolate: 'extend'
-            }),
-            translateY: offsetY.interpolate({
-                inputRange: inputRange,
-                outputRange: faces.map((x) => x.offsetY),
-                extrapolate: 'extend'
-            })
+    }, [itemRawH, getIndex, onSelectChange, resetScrollPosition]);
+    const onScrollBeginDrag = useCallback(() => {
+        isIOS && clearTimerResetPosition();
+        touching.current = true;
+        prevScrollingInfo.current = {
+            index: activeIndex.current,
+            y: activeIndex.current * itemRawH
         };
-    }, [offsetY, faces, itemRawH]);
-    const renderInnerchild = () => columnData.map((item, index) => {
-        const InnerProps = index === 0 ? { onLayout: onItemLayout } : {};
-        const strKey = `picker-column-${columnIndex}-${index}`;
-        const { opacity, rotateX, translateY } = getTransform(index);
-        return (<Animated.View key={strKey} {...InnerProps} style={[
-                {
-                    height: itemHeight || DefaultPickerItemH,
-                    width: '100%',
-                    opacity,
-                    transform: [
-                        { translateY },
-                        { rotateX },
-                        { perspective: 1000 } // 适配 Android
-                    ]
+    }, [itemRawH]);
+    const onScrollEndDrag = useCallback((e) => {
+        touching.current = false;
+        if (isIOS) {
+            const { y } = e.nativeEvent.contentOffset;
+            if (y % itemRawH === 0) {
+                onMomentumScrollEnd({ nativeEvent: { contentOffset: { y } } });
+            }
+            else if (y > 0 && y < snapToOffsets[maxIndex]) {
+                timerResetPosition.current = setTimeout(() => {
+                    resetScrollPosition(y);
+                }, 10);
+            }
+        }
+    }, [itemRawH, maxIndex, snapToOffsets, onMomentumScrollEnd, resetScrollPosition]);
+    const onScroll = useCallback((e) => {
+        // 全局注册的振动触感 hook
+        const pickerVibrate = global.__mpx?.config?.rnConfig?.pickerVibrate;
+        if (typeof pickerVibrate !== 'function') {
+            return;
+        }
+        const { y } = e.nativeEvent.contentOffset;
+        const { index: prevIndex, y: _y } = prevScrollingInfo.current;
+        if (touching.current || scrolling.current) {
+            if (Math.abs(y - _y) >= itemRawH) {
+                const currentId = getIndex(y);
+                if (currentId !== prevIndex) {
+                    prevScrollingInfo.current = {
+                        index: currentId,
+                        y: currentId * itemRawH
+                    };
+                    // vibrateShort({ type: 'selection' })
+                    pickerVibrate();
                 }
-            ]}>
-          {wrapChildren({ children: item }, {
-                hasVarDec,
-                varContext: varContextRef.current,
-                textStyle,
-                textProps
-            })}
-        </Animated.View>);
+            }
+        }
+    }, [itemRawH, getIndex]);
+    const renderInnerchild = () => columnData.map((item, index) => {
+        return (<MpxPickerVIewColumnItem key={index} item={item} index={index} itemHeight={itemHeight} textStyle={textStyle} textProps={textProps} visibleCount={visibleCount} onItemLayout={onItemLayout}/>);
     });
     const renderScollView = () => {
-        return (<Animated.ScrollView ref={scrollViewRef} bounces={true} horizontal={false} pagingEnabled={false} nestedScrollEnabled={true} removeClippedSubviews={true} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} {...layoutProps} scrollEventThrottle={16} contentContainerStyle={contentContainerStyle} contentOffset={initialOffset} snapToOffsets={snapToOffsets} onContentSizeChange={onContentSizeChange} onScroll={onScroll} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} onTouchCancel={onTouchCancel} onMomentumScrollBegin={onMomentumScrollBegin} onMomentumScrollEnd={onMomentumScrollEnd}>
-        {renderInnerchild()}
-      </Animated.ScrollView>);
+        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: '100%' }]} decelerationRate="fast" snapToOffsets={snapToOffsets} onScroll={onScroll} onScrollBeginDrag={onScrollBeginDrag} onScrollEndDrag={onScrollEndDrag} onMomentumScrollBegin={onMomentumScrollBegin} onMomentumScrollEnd={onMomentumScrollEnd} onContentSizeChange={onContentSizeChange} contentContainerStyle={contentContainerStyle}>
+          {renderInnerchild()}
+        </Reanimated.ScrollView>
+      </PickerViewColumnAnimationContext.Provider>);
     };
-    const renderOverlay = () => (<PickerOverlay itemHeight={itemHeight} overlayItemStyle={pickerOverlayStyle}/>);
-    return (<SafeAreaView style={[{ display: 'flex', flex: 1 }]}>
+    const renderIndicator = () => (<PickerIndicator itemHeight={itemHeight} indicatorItemStyle={pickerIndicatorStyle}/>);
+    const renderMask = () => (<PickerMask itemHeight={itemHeight} maskContainerStyle={pickerMaskStyle}/>);
+    return (<View style={[styles.wrapper, normalStyle]}>
       {renderScollView()}
-      {renderOverlay()}
-    </SafeAreaView>);
+      {renderMask()}
+      {renderIndicator()}
+    </View>);
+});
+const styles = StyleSheet.create({
+    wrapper: { display: 'flex', flex: 1 }
 });
 _PickerViewColumn.displayName = 'MpxPickerViewColumn';
 export default _PickerViewColumn;

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

@@ -1,8 +1,9 @@
 import { View } from 'react-native';
-import React, { forwardRef, useState, useRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { useLayout, splitProps, splitStyle, wrapChildren, parseInlineStyle, useTransformStyle, useDebounceCallback, useStableCallback, extendObject } from './utils';
+import { useLayout, splitProps, splitStyle, wrapChildren, useTransformStyle, extendObject } from './utils';
+import { PickerViewStyleContext } from './pickerVIewContext';
 const styles = {
     wrapper: {
         display: 'flex',
@@ -13,42 +14,38 @@ const styles = {
         alignItems: 'center'
     }
 };
+const DefaultPickerItemH = 36;
 const _PickerView = forwardRef((props, ref) => {
-    const { children, value = [], bindchange, style, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
-    // indicatorStyle 需要转换为rn的style
-    // 微信设置到pick-view上上设置的normalStyle如border等需要转换成RN的style然后进行透传
-    const indicatorStyle = parseInlineStyle(props['indicator-style']);
-    const { height: indicatorH, ...pickerOverlayStyle } = indicatorStyle;
-    const [pickMaxH, setPickMaxH] = useState(0);
+    const { children, value = [], bindchange, style, 'indicator-style': indicatorStyle = {}, 'mask-style': pickerMaskStyle = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
+    const { height: indicatorH, ...pickerIndicatorStyle } = indicatorStyle;
     const nodeRef = useRef(null);
     const cloneRef = useRef(null);
     const activeValueRef = useRef(value);
     activeValueRef.current = value.slice();
+    const snapActiveValueRef = useRef(null);
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
     useNodesRef(props, ref, nodeRef, {
         style: normalStyle
     });
-    const { 
-    // 存储layout布局信息
-    layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef });
+    const { layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef });
     const { textProps } = splitProps(props);
     const { textStyle } = splitStyle(normalStyle);
-    const onColumnItemRawHChange = (height) => {
-        if (height > pickMaxH) {
-            setPickMaxH(height);
-        }
-    };
-    const bindchangeDebounce = useDebounceCallback(useStableCallback(bindchange), 300);
     const onSelectChange = (columnIndex, selectedIndex) => {
-        bindchangeDebounce.clear();
         const activeValue = activeValueRef.current;
         activeValue[columnIndex] = selectedIndex;
-        const eventData = getCustomEvent('change', {}, { detail: { value: activeValue, source: 'change' }, layoutRef });
-        bindchangeDebounce(eventData);
+        const eventData = getCustomEvent('change', {}, { detail: { value: activeValue.slice(), source: 'change' }, layoutRef });
+        bindchange?.(eventData);
+        snapActiveValueRef.current = activeValueRef.current;
     };
-    const onInitialChange = (value) => {
-        const eventData = getCustomEvent('change', {}, { detail: { value, source: 'change' }, layoutRef });
-        bindchange?.(eventData); // immediate
+    const hasDiff = (a = [], b) => {
+        return a.some((v, i) => v !== b[i]);
+    };
+    const onInitialChange = (isInvalid, value) => {
+        if (isInvalid || !snapActiveValueRef.current || hasDiff(snapActiveValueRef.current, value)) {
+            const eventData = getCustomEvent('change', {}, { detail: { value: value.slice(), source: 'change' }, layoutRef });
+            bindchange?.(eventData);
+            snapActiveValueRef.current = value.slice();
+        }
     };
     const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
@@ -57,9 +54,14 @@ const _PickerView = forwardRef((props, ref) => {
             overflow: 'hidden'
         }),
         layoutProps
-    }), ['enable-offset'], { layoutRef });
+    }), [
+        'enable-offset',
+        'indicator-style',
+        'indicator-class',
+        'mask-style',
+        'mask-class'
+    ], { layoutRef });
     const renderColumn = (child, index, columnData, initialIndex) => {
-        const extraProps = {};
         const childProps = child?.props || {};
         const wrappedProps = extendObject({}, childProps, {
             columnData,
@@ -67,14 +69,14 @@ const _PickerView = forwardRef((props, ref) => {
             columnIndex: index,
             key: `pick-view-${index}`,
             wrapperStyle: {
-                height: normalStyle?.height || 0,
-                itemHeight: indicatorH || 0
+                height: normalStyle?.height || DefaultPickerItemH,
+                itemHeight: indicatorH || DefaultPickerItemH
             },
-            onColumnItemRawHChange,
             onSelectChange: onSelectChange.bind(null, index),
             initialIndex,
-            pickerOverlayStyle
-        }, extraProps);
+            pickerIndicatorStyle,
+            pickerMaskStyle
+        });
         const realElement = React.cloneElement(child, wrappedProps);
         return wrapChildren({
             children: realElement
@@ -110,12 +112,14 @@ const _PickerView = forwardRef((props, ref) => {
             validValue.push(validIndex);
             renderColumns.push(renderColumn(item, index, columnData, validIndex));
         });
-        isInvalid && onInitialChange(validValue);
+        onInitialChange(isInvalid, validValue);
         return renderColumns;
     };
-    return (<View {...innerProps}>
-      <View style={[styles.wrapper]}>{renderPickerColumns()}</View>
-    </View>);
+    return (<PickerViewStyleContext.Provider value={textStyle}>
+      <View {...innerProps}>
+        <View style={[styles.wrapper]}>{renderPickerColumns()}</View>
+      </View>
+    </PickerViewStyleContext.Provider>);
 });
 _PickerView.displayName = 'MpxPickerView';
 export default _PickerView;

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-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,6 +201,8 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
                 layoutRef
             }, props));
         updateScrollOptions(e, { scrollLeft, scrollTop });
+        onStartReached(e);
+        onEndReached(e);
         if (enableTriggerIntersectionObserver && intersectionObservers) {
             for (const key in intersectionObservers) {
                 intersectionObservers[key].throttleMeasure();
@@ -342,12 +349,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;