zkit-ui 2.0.9 → 2.0.11

package/dist/ui/WheelColumn/index.js

@@ -38,14 +38,16 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const react_native_gesture_handler_1 = require("react-native-gesture-handler");
 const react_native_worklets_1 = require("react-native-worklets");
 const zkit_tools_1 = require("zkit-tools");
 const useTheme_1 = require("../../theme/useTheme");
+const AndroidVirtualizedWheel_1 = require("./AndroidVirtualizedWheel");
 const ZKitWheelPickerNativeComponent_1 = require("./ZKitWheelPickerNativeComponent");
 var constants_1 = require("./constants");
 Object.defineProperty(exports, "WHEEL_SELECTION_BACKGROUND_COLOR", { enumerable: true, get: function () { return constants_1.WHEEL_SELECTION_BACKGROUND_COLOR; } });
 exports.WHEEL_VISIBLE_ITEMS = 5;
-// iOS 走系统 UIPickerView，Android/Web 走自绘 transform 路径。
+// iOS 走系统 UIPickerView，Android 走原生虚拟列表，Web 走自绘 transform 路径。
 // 这些尺寸是当前 app 端多轮调校后的稳定观感，保留为默认公共规格。
 const IOS_CONFIRM_SYNC_TIMEOUT_MS = 64;
 const IOS_NATIVE_PICKER_HEIGHT = (0, zkit_tools_1.wp)(260);
@@ -56,8 +58,9 @@ const BASE_WHEEL_AREA_HEIGHT = BASE_WHEEL_ITEM_HEIGHT * exports.WHEEL_VISIBLE_IT
 exports.WHEEL_VIEWPORT_HEIGHT = react_native_1.Platform.OS === 'ios' ? IOS_NATIVE_PICKER_HEIGHT : BASE_WHEEL_AREA_HEIGHT;
 exports.WHEEL_AREA_HEIGHT = react_native_1.Platform.OS === 'ios' ? Math.max(IOS_NATIVE_PICKER_HEIGHT, BASE_WHEEL_AREA_HEIGHT) : BASE_WHEEL_AREA_HEIGHT;
 exports.WHEEL_AREA_VERTICAL_INSET = Math.max(0, exports.WHEEL_AREA_HEIGHT - exports.WHEEL_VIEWPORT_HEIGHT) / 2;
-exports.WHEEL_ITEM_HEIGHT = react_native_1.Platform.OS === 'ios' ? IOS_NATIVE_PICKER_HEIGHT / exports.WHEEL_VISIBLE_ITEMS : BASE_WHEEL_ITEM_HEIGHT;
-const CENTER_OFFSET = exports.WHEEL_ITEM_HEIGHT * Math.floor(exports.WHEEL_VISIBLE_ITEMS / 2);
+const INTERNAL_WHEEL_ITEM_HEIGHT = react_native_1.Platform.OS === 'ios' ? IOS_NATIVE_PICKER_HEIGHT / exports.WHEEL_VISIBLE_ITEMS : BASE_WHEEL_ITEM_HEIGHT;
+exports.WHEEL_ITEM_HEIGHT = INTERNAL_WHEEL_ITEM_HEIGHT;
+const CENTER_OFFSET = INTERNAL_WHEEL_ITEM_HEIGHT * Math.floor(exports.WHEEL_VISIBLE_ITEMS / 2);
 const IOS_SETTLE_DELAY_MS = 90;
 const SNAP_DURATION_MIN = 140;
 const SNAP_DURATION_MAX = 280;
@@ -66,17 +69,23 @@ const RELEASE_VELOCITY_DEADZONE = 220;
 const RELEASE_LOCK_DISTANCE_ITEMS = 0.1;
 const RELEASE_LOCK_MAX_VELOCITY = 380;
 const MAX_FLING_ITEMS = 7;
-const ANDROID_VELOCITY_WINDOW_MS = 90;
+const PAN_ACTIVATION_OFFSET = (0, zkit_tools_1.wp)(3);
 const SNAP_EASING = react_native_reanimated_1.Easing.bezier(0.22, 1, 0.36, 1);
+// tsc 输出 CommonJS 后，worklet 若直接引用导入命名空间会把整个原生模块放进闭包。
+// 先保存具体函数引用，消费端 worklet 插件即可只序列化函数本身。
+const cancelAnimationOnUI = react_native_reanimated_1.cancelAnimation;
+const withTimingOnUI = react_native_reanimated_1.withTiming;
+const scheduleOnRNFromUI = react_native_worklets_1.scheduleOnRN;
 function clampNumber(n, min, max) {
     'worklet';
     return Math.max(min, Math.min(max, n));
 }
 function indexToOffset(index) {
     'worklet';
-    return index * exports.WHEEL_ITEM_HEIGHT;
+    return index * INTERNAL_WHEEL_ITEM_HEIGHT;
 }
 function getReleaseDeltaItems(velocityY) {
+    'worklet';
     const speed = Math.abs(velocityY);
     if (speed < RELEASE_VELOCITY_DEADZONE)
         return 0;
@@ -84,7 +93,8 @@ function getReleaseDeltaItems(velocityY) {
     return clampNumber(projected, 0, MAX_FLING_ITEMS);
 }
 function getTargetIndexFromRelease(offset, velocityY, maxIndex) {
-    const currentIndexFloat = offset / exports.WHEEL_ITEM_HEIGHT;
+    'worklet';
+    const currentIndexFloat = offset / INTERNAL_WHEEL_ITEM_HEIGHT;
     const nearestIndex = Math.round(currentIndexFloat);
     const distanceToNearest = Math.abs(currentIndexFloat - nearestIndex);
     const speed = Math.abs(velocityY);
@@ -106,7 +116,8 @@ function getTargetIndexFromRelease(offset, velocityY, maxIndex) {
     return clampNumber(targetIndex, 0, maxIndex);
 }
 function getSnapDuration(fromOffset, toOffset) {
-    const distanceItems = Math.abs(toOffset - fromOffset) / exports.WHEEL_ITEM_HEIGHT;
+    'worklet';
+    const distanceItems = Math.abs(toOffset - fromOffset) / INTERNAL_WHEEL_ITEM_HEIGHT;
     return clampNumber(Math.round(SNAP_DURATION_MIN + distanceItems * SNAP_DURATION_PER_ITEM), SNAP_DURATION_MIN, SNAP_DURATION_MAX);
 }
 function findOptionIndex(options, value) {
@@ -155,6 +166,47 @@ function findNearestEnabledIndex(options, index, direction = 0) {
     }
     return -1;
 }
+function findNearestEnabledFlagIndex(enabledFlags, index, direction = 0) {
+    'worklet';
+    if (!enabledFlags.length)
+        return -1;
+    const clampedIndex = clampNumber(Math.round(index), 0, enabledFlags.length - 1);
+    if (enabledFlags[clampedIndex])
+        return clampedIndex;
+    const walkForward = () => {
+        'worklet';
+        for (let i = clampedIndex + 1; i < enabledFlags.length; i += 1) {
+            if (enabledFlags[i])
+                return i;
+        }
+        return -1;
+    };
+    const walkBackward = () => {
+        'worklet';
+        for (let i = clampedIndex - 1; i >= 0; i -= 1) {
+            if (enabledFlags[i])
+                return i;
+        }
+        return -1;
+    };
+    if (direction > 0) {
+        const next = walkForward();
+        return next >= 0 ? next : walkBackward();
+    }
+    if (direction < 0) {
+        const previous = walkBackward();
+        return previous >= 0 ? previous : walkForward();
+    }
+    for (let distance = 1; distance < enabledFlags.length; distance += 1) {
+        const previous = clampedIndex - distance;
+        if (previous >= 0 && enabledFlags[previous])
+            return previous;
+        const next = clampedIndex + distance;
+        if (next < enabledFlags.length && enabledFlags[next])
+            return next;
+    }
+    return -1;
+}
 function resolveDisplayIndex(options, value) {
     if (!options.length)
         return 0;
@@ -188,7 +240,7 @@ function resolveWebInteractionStyle(disabled) {
     };
 }
 const WheelColumnBase = React.forwardRef(function WheelColumn({ options, value, defaultValue, onChange, disabled = false, width, style, itemTextStyle, selectedItemTextStyle, disabledItemTextStyle, numberOfLines = 1, accessibilityLabel, accessibilityHint, accessibilityState, testID, ...viewProps }, ref) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const theme = (0, useTheme_1.useTheme)();
     const isControlled = value !== undefined;
     const firstDefaultValue = React.useMemo(() => {
@@ -209,6 +261,7 @@ const WheelColumnBase = React.forwardRef(function WheelColumn({ options, value,
     const dragStartOffset = (0, react_native_reanimated_1.useSharedValue)(indexToOffset(displayIndex));
     const isUserInteracting = (0, react_native_reanimated_1.useSharedValue)(false);
     const iosPickerRef = React.useRef(null);
+    const androidWheelRef = React.useRef(null);
     const iosSelectedIndexRef = React.useRef(displayIndex);
     const iosSettleTimerRef = React.useRef(null);
     const iosSyncTimerRef = React.useRef(null);
@@ -294,12 +347,17 @@ const WheelColumnBase = React.forwardRef(function WheelColumn({ options, value,
         }, IOS_SETTLE_DELAY_MS);
     }, [clearIOSSettleTimer, emitSelectedIndex, resolveSelectableIndex, syncIOSSelectedIndex]);
     const scrollToIndex = React.useCallback((index, animated = false) => {
+        var _a;
         const nextIndex = clampNumber(index, 0, maxIndex);
         if (react_native_1.Platform.OS === 'ios') {
             clearIOSSettleTimer();
             syncIOSSelectedIndex(nextIndex);
             return;
         }
+        if (react_native_1.Platform.OS === 'android') {
+            (_a = androidWheelRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(nextIndex, animated);
+            return;
+        }
         const nextOffset = indexToOffset(nextIndex);
         (0, react_native_reanimated_1.cancelAnimation)(offsetY);
         isUserInteracting.value = false;
@@ -319,6 +377,10 @@ const WheelColumnBase = React.forwardRef(function WheelColumn({ options, value,
         scrollToIndex(index, animated);
     }, [options, scrollToIndex]);
     const settleToNearest = React.useCallback((animated = false) => {
+        var _a, _b;
+        if (react_native_1.Platform.OS === 'android') {
+            return (_b = (_a = androidWheelRef.current) === null || _a === void 0 ? void 0 : _a.settleToNearest(animated)) !== null && _b !== void 0 ? _b : resolveSelectableIndex(displayIndexRef.current);
+        }
         const rawIndex = react_native_1.Platform.OS === 'ios'
             ? iosSelectedIndexRef.current
             : Math.round(clampNumber(offsetY.value, 0, maxOffset) / exports.WHEEL_ITEM_HEIGHT);
@@ -343,7 +405,12 @@ const WheelColumnBase = React.forwardRef(function WheelColumn({ options, value,
             resolveIOSSyncRequest(iosSelectedIndexRef.current);
         });
     }, [clearIOSSettleTimer, resolveIOSSyncRequest, settleToNearest]);
-    React.useImperativeHandle(ref, () => ({ scrollToIndex, scrollToValue, settleToNearest, syncCurrentSelection }), [scrollToIndex, scrollToValue, settleToNearest, syncCurrentSelection]);
+    React.useImperativeHandle(ref, () => ({
+        scrollToIndex,
+        scrollToValue,
+        settleToNearest,
+        syncCurrentSelection,
+    }), [scrollToIndex, scrollToValue, settleToNearest, syncCurrentSelection]);
     React.useEffect(() => {
         selectedValueRef.current = resolvedValue;
         displayIndexRef.current = displayIndex;
@@ -381,69 +448,6 @@ const WheelColumnBase = React.forwardRef(function WheelColumn({ options, value,
         resolveIOSSyncRequest(nextIndex);
         scheduleIOSSettle(nextIndex);
     }, [resolveIOSSyncRequest, resolveSelectableIndex, scheduleIOSSettle, syncIOSSelectedIndex]);
-    const startInteraction = React.useCallback(() => {
-        (0, react_native_reanimated_1.cancelAnimation)(offsetY);
-        isUserInteracting.value = true;
-        dragStartOffset.value = offsetY.value;
-    }, [dragStartOffset, isUserInteracting, offsetY]);
-    const updateInteraction = React.useCallback((translationY) => {
-        offsetY.value = clampNumber(dragStartOffset.value - translationY, 0, maxOffset);
-    }, [dragStartOffset, maxOffset, offsetY]);
-    const finishInteraction = React.useCallback((velocityY) => {
-        const currentOffset = clampNumber(offsetY.value, 0, maxOffset);
-        const rawIndex = getTargetIndexFromRelease(currentOffset, velocityY, maxIndex);
-        const currentIndex = Math.round(currentOffset / exports.WHEEL_ITEM_HEIGHT);
-        const nextIndex = resolveSelectableIndex(rawIndex, rawIndex - currentIndex);
-        const nextOffset = indexToOffset(nextIndex);
-        offsetY.value = (0, react_native_reanimated_1.withTiming)(nextOffset, {
-            duration: getSnapDuration(currentOffset, nextOffset),
-            easing: SNAP_EASING,
-        }, (finished) => {
-            if (!finished)
-                return;
-            isUserInteracting.value = false;
-            (0, react_native_worklets_1.scheduleOnRN)(emitSelectedIndex, nextIndex, 'user');
-        });
-    }, [emitSelectedIndex, isUserInteracting, maxIndex, maxOffset, offsetY, resolveSelectableIndex]);
-    const touchStateRef = React.useRef({
-        startPageY: 0,
-        samples: [],
-    });
-    const beginTouch = React.useCallback((pageY, timestamp) => {
-        const ts = typeof timestamp === 'number' ? timestamp : Date.now();
-        touchStateRef.current = {
-            startPageY: pageY,
-            samples: [{ pageY, timestamp: ts }],
-        };
-        startInteraction();
-    }, [startInteraction]);
-    const recordTouchSample = React.useCallback((pageY, timestamp) => {
-        var _a;
-        const ts = typeof timestamp === 'number' ? timestamp : Date.now();
-        const { samples } = touchStateRef.current;
-        samples.push({ pageY, timestamp: ts });
-        while (samples.length > 6) {
-            samples.shift();
-        }
-        const minTs = ts - ANDROID_VELOCITY_WINDOW_MS;
-        while (samples.length > 2 && ((_a = samples[0]) === null || _a === void 0 ? void 0 : _a.timestamp) < minTs) {
-            samples.shift();
-        }
-    }, []);
-    const moveTouch = React.useCallback((pageY, timestamp) => {
-        updateInteraction(pageY - touchStateRef.current.startPageY);
-        recordTouchSample(pageY, timestamp);
-    }, [recordTouchSample, updateInteraction]);
-    const endTouch = React.useCallback((pageY, timestamp) => {
-        var _a, _b, _c, _d;
-        recordTouchSample(pageY, timestamp);
-        const { samples } = touchStateRef.current;
-        const firstSample = samples[0];
-        const lastSample = samples[samples.length - 1];
-        const deltaY = ((_a = lastSample === null || lastSample === void 0 ? void 0 : lastSample.pageY) !== null && _a !== void 0 ? _a : pageY) - ((_b = firstSample === null || firstSample === void 0 ? void 0 : firstSample.pageY) !== null && _b !== void 0 ? _b : pageY);
-        const deltaT = Math.max(1, ((_c = lastSample === null || lastSample === void 0 ? void 0 : lastSample.timestamp) !== null && _c !== void 0 ? _c : Date.now()) - ((_d = firstSample === null || firstSample === void 0 ? void 0 : firstSample.timestamp) !== null && _d !== void 0 ? _d : Date.now()));
-        finishInteraction((deltaY / deltaT) * 1000);
-    }, [finishInteraction, recordTouchSample]);
     const handleAccessibilityAction = React.useCallback((event) => {
         if (disabled)
             return;
@@ -457,19 +461,26 @@ const WheelColumnBase = React.forwardRef(function WheelColumn({ options, value,
         scrollToIndex(nextIndex, true);
         emitSelectedIndex(nextIndex, 'accessibility');
     }, [disabled, emitSelectedIndex, options, scrollToIndex]);
+    const handleAndroidSelectIndex = React.useCallback((nextIndex) => emitSelectedIndex(nextIndex, 'user'), [emitSelectedIndex]);
     const contentStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
         transform: [{ translateY: CENTER_OFFSET - offsetY.value }],
     }));
-    const items = React.useMemo(() => options.map((item, index) => {
-        var _a;
-        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.itemContainer, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.Text, { accessibilityLabel: (_a = item.accessibilityLabel) !== null && _a !== void 0 ? _a : item.label, maxFontSizeMultiplier: (0, zkit_tools_1.getMaxFontSizeMultiplier)(), numberOfLines: numberOfLines, style: [
-                    styles.itemText,
-                    { color: itemTextColor },
-                    itemTextStyle,
-                    index === displayIndex && [styles.itemTextSelected, { color: selectedTextColor }, selectedItemTextStyle],
-                    item.disabled && [styles.itemTextDisabled, { color: disabledTextColor }, disabledItemTextStyle],
-                ], testID: item.testID, children: item.label }) }, `${String(optionKey(item, index))}-${index}`));
-    }), [
+    const webItems = React.useMemo(() => react_native_1.Platform.OS === 'web'
+        ? options.map((item, index) => {
+            var _a;
+            return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.itemContainer, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { accessibilityLabel: (_a = item.accessibilityLabel) !== null && _a !== void 0 ? _a : item.label, maxFontSizeMultiplier: (0, zkit_tools_1.getMaxFontSizeMultiplier)(), numberOfLines: numberOfLines, style: [
+                        styles.itemText,
+                        { color: itemTextColor },
+                        itemTextStyle,
+                        index === displayIndex && [
+                            styles.itemTextSelected,
+                            { color: selectedTextColor },
+                            selectedItemTextStyle,
+                        ],
+                        item.disabled && [styles.itemTextDisabled, { color: disabledTextColor }, disabledItemTextStyle],
+                    ], testID: item.testID, children: item.label }) }, `${String(optionKey(item, index))}-${index}`));
+        })
+        : null, [
         disabledItemTextStyle,
         disabledTextColor,
         displayIndex,
@@ -480,17 +491,73 @@ const WheelColumnBase = React.forwardRef(function WheelColumn({ options, value,
         selectedItemTextStyle,
         selectedTextColor,
     ]);
-    const nativeItems = React.useMemo(() => options.map((item, index) => {
-        var _a;
-        return ({
-            label: item.label,
-            value: item.value,
-            textColor: item.disabled ? disabledTextColor : undefined,
-            testID: (_a = item.testID) !== null && _a !== void 0 ? _a : `wheel-item-${String(item.value)}-${index}`,
-        });
-    }), [disabledTextColor, options]);
+    const nativeItems = React.useMemo(() => react_native_1.Platform.OS === 'ios'
+        ? options.map((item, index) => {
+            var _a;
+            return ({
+                label: item.label,
+                value: item.value,
+                textColor: item.disabled ? disabledTextColor : undefined,
+                testID: (_a = item.testID) !== null && _a !== void 0 ? _a : `wheel-item-${String(item.value)}-${index}`,
+            });
+        })
+        : [], [disabledTextColor, options]);
     const selectedOption = options[displayIndex];
     const canInteract = !disabled && options.length > 1 && findNearestEnabledIndex(options, displayIndex) >= 0;
+    const enabledFlags = React.useMemo(() => (react_native_1.Platform.OS === 'web' ? options.map((option) => !option.disabled) : []), [options]);
+    const panGesture = React.useMemo(() => react_native_gesture_handler_1.Gesture.Pan()
+        .enabled(react_native_1.Platform.OS === 'web' && canInteract)
+        .activeOffsetY([-PAN_ACTIVATION_OFFSET, PAN_ACTIVATION_OFFSET])
+        .averageTouches(true)
+        .onStart(() => {
+        'worklet';
+        cancelAnimationOnUI(offsetY);
+        isUserInteracting.value = true;
+        dragStartOffset.value = offsetY.value;
+    })
+        .onUpdate((event) => {
+        'worklet';
+        offsetY.value = clampNumber(dragStartOffset.value - event.translationY, 0, maxOffset);
+    })
+        .onEnd((event) => {
+        'worklet';
+        const currentOffset = clampNumber(offsetY.value, 0, maxOffset);
+        const currentIndex = Math.round(currentOffset / INTERNAL_WHEEL_ITEM_HEIGHT);
+        const rawIndex = getTargetIndexFromRelease(currentOffset, event.velocityY, maxIndex);
+        const direction = rawIndex - currentIndex;
+        const enabledIndex = findNearestEnabledFlagIndex(enabledFlags, rawIndex, direction);
+        const nextIndex = enabledIndex >= 0 ? enabledIndex : clampNumber(rawIndex, 0, maxIndex);
+        const nextOffset = indexToOffset(nextIndex);
+        offsetY.value = withTimingOnUI(nextOffset, {
+            duration: getSnapDuration(currentOffset, nextOffset),
+            easing: SNAP_EASING,
+        }, (finished) => {
+            if (!finished)
+                return;
+            isUserInteracting.value = false;
+            scheduleOnRNFromUI(emitSelectedIndex, nextIndex, 'user');
+        });
+    })
+        .onFinalize((_event, success) => {
+        'worklet';
+        if (success || !isUserInteracting.value)
+            return;
+        const currentOffset = clampNumber(offsetY.value, 0, maxOffset);
+        const currentIndex = Math.round(currentOffset / INTERNAL_WHEEL_ITEM_HEIGHT);
+        const direction = currentOffset - dragStartOffset.value;
+        const enabledIndex = findNearestEnabledFlagIndex(enabledFlags, currentIndex, direction);
+        const nextIndex = enabledIndex >= 0 ? enabledIndex : clampNumber(currentIndex, 0, maxIndex);
+        const nextOffset = indexToOffset(nextIndex);
+        offsetY.value = withTimingOnUI(nextOffset, {
+            duration: getSnapDuration(currentOffset, nextOffset),
+            easing: SNAP_EASING,
+        }, (finished) => {
+            if (!finished)
+                return;
+            isUserInteracting.value = false;
+            scheduleOnRNFromUI(emitSelectedIndex, nextIndex, 'user');
+        });
+    }), [canInteract, dragStartOffset, emitSelectedIndex, enabledFlags, isUserInteracting, maxIndex, maxOffset, offsetY]);
     const columnStyle = React.useMemo(() => [styles.column, width != null && { width }, resolveWebInteractionStyle(disabled), style], [disabled, style, width]);
     const resolvedAccessibilityState = React.useMemo(() => ({
         ...accessibilityState,
@@ -499,15 +566,10 @@ const WheelColumnBase = React.forwardRef(function WheelColumn({ options, value,
     if (react_native_1.Platform.OS === 'ios') {
         return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ...viewProps, accessibilityHint: accessibilityHint, accessibilityLabel: accessibilityLabel, accessibilityState: resolvedAccessibilityState, accessibilityValue: { text: (_j = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _j !== void 0 ? _j : '' }, style: columnStyle, pointerEvents: canInteract ? 'auto' : 'none', testID: testID, children: (0, jsx_runtime_1.jsx)(ZKitWheelPickerNativeComponent_1.ZKitWheelPicker, { ref: iosPickerRef, items: nativeItems, selectedIndex: iosSelectedIndex, onChange: handleIOSChange, numberOfLines: numberOfLines, rowHeight: IOS_NATIVE_PICKER_ROW_HEIGHT, style: styles.iosPicker, fontFamily: nativeFontFamily, fontSize: nativeFontSize, fontStyle: nativeFontStyle, fontWeight: nativeFontWeight, color: selectedTextColor }) }));
     }
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { ...viewProps, accessibilityActions: [{ name: 'increment' }, { name: 'decrement' }], accessibilityHint: accessibilityHint, accessibilityLabel: accessibilityLabel, accessibilityRole: "adjustable", accessibilityState: resolvedAccessibilityState, accessibilityValue: { text: (_k = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _k !== void 0 ? _k : '' }, collapsable: false, onAccessibilityAction: handleAccessibilityAction, style: columnStyle, testID: testID, children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.content, contentStyle], pointerEvents: "none", renderToHardwareTextureAndroid: react_native_1.Platform.OS === 'android', shouldRasterizeIOS: false, children: items }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.touchSurface, collapsable: false, pointerEvents: "box-only", onStartShouldSetResponder: () => canInteract, onStartShouldSetResponderCapture: () => canInteract, onMoveShouldSetResponder: () => canInteract, onMoveShouldSetResponderCapture: () => canInteract, onResponderTerminationRequest: () => false, onResponderGrant: (event) => {
-                    beginTouch(event.nativeEvent.pageY, event.nativeEvent.timestamp);
-                }, onResponderMove: (event) => {
-                    moveTouch(event.nativeEvent.pageY, event.nativeEvent.timestamp);
-                }, onResponderRelease: (event) => {
-                    endTouch(event.nativeEvent.pageY, event.nativeEvent.timestamp);
-                }, onResponderTerminate: (event) => {
-                    endTouch(event.nativeEvent.pageY, event.nativeEvent.timestamp);
-                } })] }));
+    if (react_native_1.Platform.OS === 'android') {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ...viewProps, accessibilityActions: [{ name: 'increment' }, { name: 'decrement' }], accessibilityHint: accessibilityHint, accessibilityLabel: accessibilityLabel, accessibilityRole: "adjustable", accessibilityState: resolvedAccessibilityState, accessibilityValue: { text: (_k = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _k !== void 0 ? _k : '' }, onAccessibilityAction: handleAccessibilityAction, style: columnStyle, testID: testID, children: (0, jsx_runtime_1.jsx)(AndroidVirtualizedWheel_1.AndroidVirtualizedWheel, { ref: androidWheelRef, options: options, selectedIndex: displayIndex, canInteract: canInteract, itemHeight: exports.WHEEL_ITEM_HEIGHT, visibleItems: exports.WHEEL_VISIBLE_ITEMS, itemTextColor: itemTextColor, selectedTextColor: selectedTextColor, disabledTextColor: disabledTextColor, itemTextStyle: itemTextStyle, selectedItemTextStyle: selectedItemTextStyle, disabledItemTextStyle: disabledItemTextStyle, numberOfLines: numberOfLines, resolveSelectableIndex: resolveSelectableIndex, onSelectIndex: handleAndroidSelectIndex }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureDetector, { gesture: panGesture, touchAction: "none", userSelect: "none", children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { ...viewProps, accessibilityActions: [{ name: 'increment' }, { name: 'decrement' }], accessibilityHint: accessibilityHint, accessibilityLabel: accessibilityLabel, accessibilityRole: "adjustable", accessibilityState: resolvedAccessibilityState, accessibilityValue: { text: (_l = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _l !== void 0 ? _l : '' }, collapsable: false, onAccessibilityAction: handleAccessibilityAction, style: columnStyle, testID: testID, children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.content, contentStyle], pointerEvents: "none", children: webItems }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.touchSurface, collapsable: false, pointerEvents: "box-only" })] }) }));
 });
 exports.WheelColumn = React.memo(WheelColumnBase);
 const styles = react_native_1.StyleSheet.create({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zkit-ui",
-  "version": "2.0.9",
+  "version": "2.0.11",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/ui/Checkbox/index.tsx

@@ -1017,31 +1017,39 @@ export type CheckboxIndicatorProps = {
 };
 
 export function CheckboxIndicator({ children, style }: CheckboxIndicatorProps) {
-  const context = useCheckboxIndicatorContext();
-  const customIndicator = children ?? context.customIndicator;
+  const {
+    boxSize,
+    checkedSv,
+    customIndicator: contextCustomIndicator,
+    defaultIcon,
+    indeterminateIndicatorColor,
+    indeterminateSv,
+    slot,
+  } = useCheckboxIndicatorContext();
+  const customIndicator = children ?? contextCustomIndicator;
 
   const checkedIconAnimatedStyle = useAnimatedStyle(() => {
-    const opacity = context.checkedSv.value * (1 - context.indeterminateSv.value);
-    const scale = interpolate(context.checkedSv.value, [0, 1], [0.78, 1]);
+    const opacity = checkedSv.value * (1 - indeterminateSv.value);
+    const scale = interpolate(checkedSv.value, [0, 1], [0.78, 1]);
     return { opacity, transform: [{ scale }] };
   });
 
   const indeterminateAnimatedStyle = useAnimatedStyle(() => {
-    const opacity = context.checkedSv.value * context.indeterminateSv.value;
-    const scale = interpolate(context.indeterminateSv.value, [0, 1], [0.82, 1]);
+    const opacity = checkedSv.value * indeterminateSv.value;
+    const scale = interpolate(indeterminateSv.value, [0, 1], [0.82, 1]);
     return { opacity, transform: [{ scale }] };
   });
 
   const customIndicatorAnimatedStyle = useAnimatedStyle(() => {
-    const opacity = context.checkedSv.value;
-    const scale = interpolate(context.checkedSv.value, [0, 1], [0.78, 1]);
+    const opacity = checkedSv.value;
+    const scale = interpolate(checkedSv.value, [0, 1], [0.78, 1]);
     return { opacity, transform: [{ scale }] };
   });
 
-  const indeterminateWidth = Math.max(wp(8), Math.round(context.boxSize * 0.56));
-  const indeterminateHeight = Math.max(wp(2), Math.round(context.boxSize * 0.11));
+  const indeterminateWidth = Math.max(wp(8), Math.round(boxSize * 0.56));
+  const indeterminateHeight = Math.max(wp(2), Math.round(boxSize * 0.11));
   const resolvedCustomIndicator = isIndicatorRenderProp(customIndicator)
-    ? customIndicator(context.slot)
+    ? customIndicator(slot)
     : customIndicator;
 
   return (
@@ -1050,8 +1058,8 @@ export function CheckboxIndicator({ children, style }: CheckboxIndicatorProps) {
       style={[
         styles.indicatorLayer,
         {
-          width: context.boxSize,
-          height: context.boxSize,
+          width: boxSize,
+          height: boxSize,
         },
         style,
       ]}
@@ -1066,12 +1074,12 @@ export function CheckboxIndicator({ children, style }: CheckboxIndicatorProps) {
                 width: indeterminateWidth,
                 height: indeterminateHeight,
                 borderRadius: indeterminateHeight / 2,
-                backgroundColor: context.indeterminateIndicatorColor,
+                backgroundColor: indeterminateIndicatorColor,
               }}
             />
           </Animated.View>
           <Animated.View style={[styles.iconLayer, checkedIconAnimatedStyle]}>
-            {context.defaultIcon}
+            {defaultIcon}
           </Animated.View>
         </>
       )}

package/src/ui/Picker/README.md

@@ -188,4 +188,4 @@ Accessor props:
 
 - `label/defaultLabel/onLabelChange` 不再作为 Picker 状态。label 是由已确认 `value + options` 推导出的展示结果，业务需要自定义显示时使用 `formatLabel` 或 trigger render context。
 - `onChange` 表示最终表单值变化，和 TextInput、Radio、CheckboxGroup 的状态事件保持一致。
-- iOS 保留原生 `UIPickerView`，Android/Web 继续走自绘 wheel。Picker 层只处理级联状态和弹层生命周期，不把额外 JS 工作塞进滚轮关键帧。
+- iOS 保留原生 `UIPickerView`，Android 使用原生虚拟化滚动，Web 使用自绘 wheel。Picker 层只处理级联状态和弹层生命周期，不把额外 JS 工作塞进滚轮关键帧。

package/src/ui/Switch/index.tsx

@@ -897,7 +897,7 @@ function SwitchImpl(
       />
       <View
         style={[
-          StyleSheet.absoluteFillObject,
+          StyleSheet.absoluteFill,
           {
             borderRadius: trackRadius,
             backgroundColor: visualUncheckedTrackColor,
@@ -908,7 +908,7 @@ function SwitchImpl(
       <Animated.View
         pointerEvents="none"
         style={[
-          StyleSheet.absoluteFillObject,
+          StyleSheet.absoluteFill,
           {
             borderRadius: trackRadius,
             backgroundColor: visualCheckedTrackColor,
@@ -918,8 +918,15 @@ function SwitchImpl(
       />
 
       {hasStateText ? (
-        <View pointerEvents="none" style={styles.stateTextLayer}>
-          <Animated.View style={[styles.stateTextSlot, checkedTextSlotStyle, checkedTextAnimatedStyle]}>
+        <View pointerEvents="none" style={[StyleSheet.absoluteFill, styles.stateTextLayer]}>
+          <Animated.View
+            style={[
+              StyleSheet.absoluteFill,
+              styles.stateTextSlot,
+              checkedTextSlotStyle,
+              checkedTextAnimatedStyle,
+            ]}
+          >
             <Text
               allowFontScaling={false}
               ellipsizeMode="clip"
@@ -937,7 +944,14 @@ function SwitchImpl(
               {stateText?.checked ?? ''}
             </Text>
           </Animated.View>
-          <Animated.View style={[styles.stateTextSlot, uncheckedTextSlotStyle, uncheckedTextAnimatedStyle]}>
+          <Animated.View
+            style={[
+              StyleSheet.absoluteFill,
+              styles.stateTextSlot,
+              uncheckedTextSlotStyle,
+              uncheckedTextAnimatedStyle,
+            ]}
+          >
             <Text
               allowFontScaling={false}
               ellipsizeMode="clip"
@@ -1069,12 +1083,10 @@ const styles = StyleSheet.create({
     position: 'absolute',
   },
   stateTextLayer: {
-    ...StyleSheet.absoluteFillObject,
     alignItems: 'center',
     justifyContent: 'center',
   },
   stateTextSlot: {
-    ...StyleSheet.absoluteFillObject,
     alignItems: 'center',
     justifyContent: 'center',
     overflow: 'hidden',