@mpxjs/webpack-plugin 2.9.70-alpha.0 → 2.9.71

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

@@ -11,7 +11,7 @@
  * ✘ scale-min
  * ✘ scale-max
  * ✘ scale-value
- * ✘ animation
+ * ✔ animation
  * ✔ bindchange
  * ✘ bindscale
  * ✔ htouchmove
@@ -19,12 +19,13 @@
  */
 import { useEffect, forwardRef, useContext, useCallback, useRef, useMemo, createElement } from 'react';
 import { StyleSheet } from 'react-native';
-import { getCustomEvent } from './getInnerListeners';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { MovableAreaContext } from './context';
-import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture, extendObject } from './utils';
+import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture, extendObject, omit } from './utils';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import Animated, { useSharedValue, useAnimatedStyle, withDecay, runOnJS, runOnUI, useAnimatedReaction, withSpring } from 'react-native-reanimated';
+import { collectDataset, noop } from '@mpxjs/utils';
 const styles = StyleSheet.create({
     container: {
         position: 'absolute',
@@ -233,8 +234,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         });
         props.onLayout && props.onLayout(e);
     };
-    const extendEvent = useCallback((e) => {
-        'worklet';
+    const extendEvent = useCallback((e, obj) => {
         const touchArr = [e.changedTouches, e.allTouches];
         touchArr.forEach(touches => {
             touches && touches.forEach((item) => {
@@ -242,45 +242,65 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                 item.pageY = item.absoluteY;
             });
         });
-        e.touches = e.allTouches;
+        Object.assign(e, {
+            touches: e.allTouches,
+            detail: {
+                x: e.changedTouches[0].absoluteX,
+                y: e.changedTouches[0].absoluteY
+            },
+            currentTarget: {
+                id: props.id || '',
+                dataset: collectDataset(props),
+                offsetLeft: 0,
+                offsetTop: 0
+            }
+        }, obj);
     }, []);
+    const triggerStartOnJS = ({ e }) => {
+        extendEvent(e);
+        bindtouchstart && bindtouchstart(e);
+        catchtouchstart && catchtouchstart(e);
+    };
+    const triggerMoveOnJS = ({ e, hasTouchmove, hasCatchTouchmove, touchEvent }) => {
+        extendEvent(e);
+        if (hasTouchmove) {
+            if (touchEvent === 'htouchmove') {
+                bindhtouchmove && bindhtouchmove(e);
+            }
+            else if (touchEvent === 'vtouchmove') {
+                bindvtouchmove && bindvtouchmove(e);
+            }
+            bindtouchmove && bindtouchmove(e);
+        }
+        if (hasCatchTouchmove) {
+            if (touchEvent === 'htouchmove') {
+                catchhtouchmove && catchhtouchmove(e);
+            }
+            else if (touchEvent === 'vtouchmove') {
+                catchvtouchmove && catchvtouchmove(e);
+            }
+            catchtouchmove && catchtouchmove(e);
+        }
+    };
+    const triggerEndOnJS = ({ e }) => {
+        extendEvent(e);
+        bindtouchend && bindtouchend(e);
+        catchtouchend && catchtouchend(e);
+    };
     const gesture = useMemo(() => {
-        const handleTriggerStart = (e) => {
-            'worklet';
-            extendEvent(e);
-            bindtouchstart && runOnJS(bindtouchstart)(e);
-            catchtouchstart && runOnJS(catchtouchstart)(e);
-        };
         const handleTriggerMove = (e) => {
             'worklet';
-            extendEvent(e);
             const hasTouchmove = !!bindhtouchmove || !!bindvtouchmove || !!bindtouchmove;
             const hasCatchTouchmove = !!catchhtouchmove || !!catchvtouchmove || !!catchtouchmove;
-            if (hasTouchmove) {
-                if (touchEvent.value === 'htouchmove') {
-                    bindhtouchmove && runOnJS(bindhtouchmove)(e);
-                }
-                else if (touchEvent.value === 'vtouchmove') {
-                    bindvtouchmove && runOnJS(bindvtouchmove)(e);
-                }
-                bindtouchmove && runOnJS(bindtouchmove)(e);
-            }
-            if (hasCatchTouchmove) {
-                if (touchEvent.value === 'htouchmove') {
-                    catchhtouchmove && runOnJS(catchhtouchmove)(e);
-                }
-                else if (touchEvent.value === 'vtouchmove') {
-                    catchvtouchmove && runOnJS(catchvtouchmove)(e);
-                }
-                catchtouchmove && runOnJS(catchtouchmove)(e);
+            if (hasTouchmove || hasCatchTouchmove) {
+                runOnJS(triggerMoveOnJS)({
+                    e,
+                    touchEvent: touchEvent.value,
+                    hasTouchmove,
+                    hasCatchTouchmove
+                });
             }
         };
-        const handleTriggerEnd = (e) => {
-            'worklet';
-            extendEvent(e);
-            bindtouchend && runOnJS(bindtouchend)(e);
-            catchtouchend && runOnJS(catchtouchend)(e);
-        };
         const gesturePan = Gesture.Pan()
             .onTouchesDown((e) => {
             'worklet';
@@ -290,12 +310,14 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                 x: changedTouches.x,
                 y: changedTouches.y
             };
-            handleTriggerStart(e);
+            if (bindtouchstart || catchtouchstart) {
+                runOnJS(triggerStartOnJS)({ e });
+            }
         })
             .onTouchesMove((e) => {
             'worklet';
-            isMoving.value = true;
             const changedTouches = e.changedTouches[0] || { x: 0, y: 0 };
+            isMoving.value = true;
             if (isFirstTouch.value) {
                 touchEvent.value = Math.abs(changedTouches.x - startPosition.value.x) > Math.abs(changedTouches.y - startPosition.value.y) ? 'htouchmove' : 'vtouchmove';
                 isFirstTouch.value = false;
@@ -330,7 +352,9 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
             'worklet';
             isFirstTouch.value = true;
             isMoving.value = false;
-            handleTriggerEnd(e);
+            if (bindtouchend || catchtouchend) {
+                runOnJS(triggerEndOnJS)({ e });
+            }
             if (disabled)
                 return;
             if (!inertia) {
@@ -355,9 +379,9 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         })
             .onFinalize((e) => {
             'worklet';
+            isMoving.value = false;
             if (!inertia || disabled || !animation)
                 return;
-            isMoving.value = false;
             if (direction === 'horizontal' || direction === 'all') {
                 xInertialMotion.value = true;
                 offsetX.value = withDecay({
@@ -396,31 +420,42 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
             ]
         };
     });
-    const injectCatchEvent = (props) => {
-        const eventHandlers = {};
-        const catchEventList = [
-            { name: 'onTouchStart', value: ['catchtouchstart'] },
-            { name: 'onTouchMove', value: ['catchtouchmove', 'catchvtouchmove', 'catchhtouchmove'] },
-            { name: 'onTouchEnd', value: ['catchtouchend'] }
+    const rewriteCatchEvent = () => {
+        const handlers = {};
+        const events = [
+            { type: 'touchstart' },
+            { type: 'touchmove', alias: ['vtouchmove', 'htouchmove'] },
+            { type: 'touchend' }
         ];
-        catchEventList.forEach(event => {
-            event.value.forEach(name => {
-                if (props[name] && !eventHandlers[event.name]) {
-                    eventHandlers[event.name] = (e) => {
-                        e.stopPropagation();
-                    };
-                }
-            });
+        events.forEach(({ type, alias = [] }) => {
+            const hasCatchEvent = props[`catch${type}`] ||
+                alias.some(name => props[`catch${name}`]);
+            if (hasCatchEvent)
+                handlers[`catch${type}`] = noop;
         });
-        return eventHandlers;
+        return handlers;
     };
-    const catchEventHandlers = injectCatchEvent(props);
     const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {};
-    return createElement(GestureDetector, { gesture: gesture }, createElement(Animated.View, extendObject({
+    // bind 相关 touch 事件直接由 gesture 触发，无须重复挂载
+    // catch 相关 touch 事件需要重写并通过 useInnerProps 注入阻止冒泡逻辑
+    const filterProps = omit(props, [
+        'bindtouchstart',
+        'bindtouchmove',
+        'bindvtouchmove',
+        'bindhtouchmove',
+        'bindtouchend',
+        'catchtouchstart',
+        'catchtouchmove',
+        'catchvtouchmove',
+        'catchhtouchmove',
+        'catchtouchend'
+    ]);
+    const innerProps = useInnerProps(filterProps, extendObject({
         ref: nodeRef,
         onLayout: onLayout,
         style: [innerStyle, animatedStyles, layoutStyle]
-    }, catchEventHandlers), wrapChildren(props, {
+    }, rewriteCatchEvent()));
+    return createElement(GestureDetector, { gesture: gesture }, createElement(Animated.View, innerProps, wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current,
         textStyle,

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

@@ -3,7 +3,7 @@ import useInnerProps from './getInnerListeners';
 import { redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy';
 import MpxView from './mpx-view';
 const _Navigator = forwardRef((props, ref) => {
-    const { children, 'open-type': openType, url, delta } = props;
+    const { children, 'open-type': openType, url = '', delta } = props;
     const handleClick = useCallback(() => {
         switch (openType) {
             case 'navigateBack':

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

@@ -1,9 +1,10 @@
 import React, { useEffect } from 'react';
 import Reanimated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
-import { wrapChildren, extendObject } from './utils';
+import { extendObject } from './utils';
 import { createFaces } from './pickerFaces';
-import { usePickerViewColumnAnimationContext } from './pickerVIewContext';
-const _PickerViewColumnItem = ({ item, index, itemHeight, itemWidth, textStyleFromParent, textStyle, hasVarDec, varContext, textProps, visibleCount, onItemLayout }) => {
+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(() => {
@@ -14,8 +15,8 @@ const _PickerViewColumnItem = ({ item, index, itemHeight, itemWidth, textStyleFr
         return {
             opacity: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.opacity), Extrapolation.CLAMP),
             transform: [
-                { rotateX: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
                 { 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) }
             ]
         };
@@ -23,17 +24,12 @@ const _PickerViewColumnItem = ({ item, index, itemHeight, itemWidth, textStyleFr
     const strKey = `picker-column-item-${index}`;
     const restProps = index === 0 ? { onLayout: onItemLayout } : {};
     const itemProps = extendObject({
-        style: extendObject({ height: itemHeight, width: '100%' }, textStyleFromParent, textStyle, item.props.style)
-    }, restProps);
+        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]}>
-      {wrapChildren({ children: realItem }, {
-            hasVarDec,
-            varContext,
-            textStyle,
-            textProps
-        })}
+      {realItem}
     </Reanimated.View>);
 };
-_PickerViewColumnItem.displayName = 'MpxPickerViewColumnItem';
-export default _PickerViewColumnItem;
+PickerViewColumnItem.displayName = 'MpxPickerViewColumnItem';
+export default PickerViewColumnItem;

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

@@ -1,34 +1,31 @@
 import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react';
-import { Platform, SafeAreaView, StyleSheet } from 'react-native';
+import { StyleSheet, View } 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 } from './utils';
 import useNodesRef from './useNodesRef';
-import PickerOverlay from './pickerViewOverlay';
+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, columnStyle, initialIndex, onSelectChange, style, wrapperStyle, pickerMaskStyle, pickerOverlayStyle, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
-    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
-    const { textStyle: textStyleFromParent = {} } = splitStyle(columnStyle);
+    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 { textProps = {} } = splitProps(props);
     const scrollViewRef = useAnimatedRef();
     const offsetYShared = useScrollViewOffset(scrollViewRef);
     useNodesRef(props, ref, scrollViewRef, {
         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 timerResetPosition = useRef(null);
+    const timerScrollTo = useRef(null);
     const activeIndex = useRef(initialIndex);
     const prevIndex = usePrevious(initialIndex);
     const prevMaxIndex = usePrevious(maxIndex);
@@ -39,13 +36,8 @@ 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])
-    const snapToOffsets = useMemo(() => columnData.map((_, i) => i * itemRawH), [columnData, itemRawH]);
-    const paddingHeight = useMemo(() => Math.round((pickerH - itemRawH) / 2), [pickerH, itemRawH]);
+    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: paddingHeight }];
     }, [paddingHeight]);
@@ -53,6 +45,24 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         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 ||
@@ -64,80 +74,82 @@ 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: initialIndex * itemRawH,
                 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)
+    }, [itemRawH, maxIndex, initialIndex]);
+    const onContentSizeChange = useCallback((_w, h) => {
+        const y = initialIndex * itemRawH;
         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);
+    }, [itemRawH, initialIndex]);
+    const onItemLayout = useCallback((e) => {
+        const { height: rawH } = e.nativeEvent.layout;
+        const roundedH = Math.round(rawH);
+        if (roundedH && roundedH !== itemRawH) {
+            setItemRawH(roundedH);
         }
-        if (itemRawW === '100%') {
-            setItemRawW(widthInt);
+    }, [itemRawH]);
+    const resetScrollPosition = useCallback((y) => {
+        if (touching.current || scrolling.current) {
+            return;
         }
-    };
-    const onItemLayout = (e) => {
-        const { height: rawH } = e.nativeEvent.layout;
-        if (rawH && itemRawH !== rawH) {
-            setItemRawH(rawH);
+        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;
+        if (isIOS && scrollY % itemRawH !== 0) {
+            return resetScrollPosition(scrollY);
         }
-    };
-    const onTouchStart = () => {
+        const calcIndex = getIndex(scrollY);
+        if (calcIndex !== activeIndex.current) {
+            activeIndex.current = calcIndex;
+            onSelectChange(calcIndex);
+        }
+    }, [itemRawH, getIndex, onSelectChange, resetScrollPosition]);
+    const onScrollBeginDrag = useCallback(() => {
+        isIOS && clearTimerResetPosition();
         touching.current = true;
         prevScrollingInfo.current = {
             index: activeIndex.current,
             y: activeIndex.current * itemRawH
         };
-    };
-    const onTouchEnd = () => {
+    }, [itemRawH]);
+    const onScrollEndDrag = useCallback((e) => {
         touching.current = false;
-    };
-    const onTouchCancel = () => {
-        touching.current = false;
-    };
-    const onMomentumScrollBegin = () => {
-        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;
-            onSelectChange(calcIndex);
+        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);
+            }
         }
-    };
-    const onScroll = (e) => {
-        if (Platform.OS === 'android') {
+    }, [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;
@@ -150,28 +162,29 @@ const _PickerViewColumn = forwardRef((props, ref) => {
                         index: currentId,
                         y: currentId * itemRawH
                     };
-                    vibrateShort({ type: 'selection' });
+                    // vibrateShort({ type: 'selection' })
+                    pickerVibrate();
                 }
             }
         }
-    };
+    }, [itemRawH, getIndex]);
     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} textStyle={textStyle} 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>);
     };
-    const renderOverlay = () => (<PickerOverlay itemHeight={itemHeight} overlayItemStyle={pickerOverlayStyle}/>);
+    const renderIndicator = () => (<PickerIndicator itemHeight={itemHeight} indicatorItemStyle={pickerIndicatorStyle}/>);
     const renderMask = () => (<PickerMask itemHeight={itemHeight} maskContainerStyle={pickerMaskStyle}/>);
-    return (<SafeAreaView style={[styles.wrapper, normalStyle]}>
+    return (<View style={[styles.wrapper, normalStyle]}>
       {renderScollView()}
       {renderMask()}
-      {renderOverlay()}
-    </SafeAreaView>);
+      {renderIndicator()}
+    </View>);
 });
 const styles = StyleSheet.create({
     wrapper: { display: 'flex', flex: 1 }

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

@@ -2,7 +2,8 @@ import { View } from 'react-native';
 import React, { forwardRef, useRef } from 'react';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { useLayout, splitProps, splitStyle, wrapChildren, parseInlineStyle, useTransformStyle, extendObject } from './utils';
+import { useLayout, splitProps, splitStyle, wrapChildren, useTransformStyle, extendObject } from './utils';
+import { PickerViewStyleContext } from './pickerVIewContext';
 const styles = {
     wrapper: {
         display: 'flex',
@@ -15,16 +16,13 @@ const styles = {
 };
 const DefaultPickerItemH = 36;
 const _PickerView = forwardRef((props, ref) => {
-    const { children, value = [], bindchange, style, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
-    const indicatorStyle = parseInlineStyle(props['indicator-style']);
-    const pickerMaskStyle = parseInlineStyle(props['mask-style']);
-    const { height: indicatorH, ...pickerOverlayStyle } = indicatorStyle;
+    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);
-    console.log('[mpx-picker-view] value=', value, Date.now());
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
     useNodesRef(props, ref, nodeRef, {
         style: normalStyle
@@ -35,8 +33,7 @@ const _PickerView = forwardRef((props, ref) => {
     const onSelectChange = (columnIndex, selectedIndex) => {
         const activeValue = activeValueRef.current;
         activeValue[columnIndex] = selectedIndex;
-        console.log('[mpx-picker-view], onSelectChange ---> columnIndex=', columnIndex, 'selectedIndex=', selectedIndex, 'activeValue=', activeValue);
-        const eventData = getCustomEvent('change', {}, { detail: { value: activeValue, source: 'change' }, layoutRef });
+        const eventData = getCustomEvent('change', {}, { detail: { value: activeValue.slice(), source: 'change' }, layoutRef });
         bindchange?.(eventData);
         snapActiveValueRef.current = activeValueRef.current;
     };
@@ -45,8 +42,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);
-            const eventData = getCustomEvent('change', {}, { detail: { value, source: 'change' }, layoutRef });
+            const eventData = getCustomEvent('change', {}, { detail: { value: value.slice(), source: 'change' }, layoutRef });
             bindchange?.(eventData);
             snapActiveValueRef.current = value.slice();
         }
@@ -58,7 +54,13 @@ 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 childProps = child?.props || {};
         const wrappedProps = extendObject({}, childProps, {
@@ -70,10 +72,9 @@ const _PickerView = forwardRef((props, ref) => {
                 height: normalStyle?.height || DefaultPickerItemH,
                 itemHeight: indicatorH || DefaultPickerItemH
             },
-            columnStyle: normalStyle,
             onSelectChange: onSelectChange.bind(null, index),
             initialIndex,
-            pickerOverlayStyle,
+            pickerIndicatorStyle,
             pickerMaskStyle
         });
         const realElement = React.cloneElement(child, wrappedProps);
@@ -114,9 +115,11 @@ const _PickerView = forwardRef((props, ref) => {
         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;