@seakoi/native-ui 1.1.3 → 1.3.0

package/dist/commonjs/components/base/tabs/tabs.js

@@ -4,16 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Tabs = void 0;
+var _ahooks = require("ahooks");
 var _react = require("react");
 var _reactNative = require("react-native");
 var _index = require("./../index.js");
 var _index2 = require("../../../native-provider/index.js");
+var _index3 = require("./style/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
 const Tabs = ({
   tabs,
-  onChange
+  equalWidth = false,
+  variant = 'underline',
+  ...restProps
 }) => {
-  const styles = useStyles();
+  const [activeValue, setActiveValue] = (0, _ahooks.useControllableValue)(restProps, {
+    trigger: 'onChange',
+    defaultValue: restProps.defaultValue ?? tabs[0]?.value
+  });
+  const styles = (0, _index3.useTabsStyles)();
   const theme = (0, _index2.useTheme)();
   const tabNum = tabs.length;
   const scrollViewWidthRef = (0, _react.useRef)(0);
@@ -41,27 +49,21 @@ const Tabs = ({
     };
     initIndicator();
   };
-  const normalizedTabs = tabs.map(tab => {
-    if (typeof tab === 'string') {
-      return {
-        label: tab,
-        value: tab
-      };
-    }
-  });
   const navigateTo = index => {
     const targetLayout = layouts.current[index];
     const left = targetLayout.tab.x + (targetLayout.tab.width - targetLayout.text.width) / 2;
-    const width = targetLayout.text.width;
-    _reactNative.Animated.parallel([_reactNative.Animated.timing(animatedIndicatorLeft.current, {
-      toValue: left,
-      useNativeDriver: false,
-      duration: 300
-    }), _reactNative.Animated.timing(animatedIndicatorWidth.current, {
-      toValue: width,
-      useNativeDriver: false,
-      duration: 300
-    })]).start();
+    if (variant === 'underline') {
+      const width = targetLayout.text.width;
+      _reactNative.Animated.parallel([_reactNative.Animated.timing(animatedIndicatorLeft.current, {
+        toValue: left,
+        useNativeDriver: false,
+        duration: 300
+      }), _reactNative.Animated.timing(animatedIndicatorWidth.current, {
+        toValue: width,
+        useNativeDriver: false,
+        duration: 300
+      })]).start();
+    }
     const hh = scrollViewWidthRef.current / 2;
     scrollViewRef.current?.scrollTo({
       x: targetLayout.tab.x + targetLayout.tab.width / 2 - hh,
@@ -69,10 +71,10 @@ const Tabs = ({
     });
   };
   const genOnPress = (v, index) => {
-    onChange?.(v);
+    setActiveValue?.(v.value);
     navigateTo(index);
   };
-  const initIndicator = (0, _react.useCallback)(() => {
+  const initIndicator = (0, _ahooks.useMemoizedFn)(() => {
     const layoutItems = layouts.current.filter(item => item.tab && item.text);
     if (layoutItems.length === layouts.current.length) {
       setState(s => ({
@@ -80,7 +82,7 @@ const Tabs = ({
         layoutFinish: true
       }));
     }
-  }, []);
+  });
   const indicatorJSX = (0, _react.useMemo)(() => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
       style: {
@@ -93,22 +95,72 @@ const Tabs = ({
       }
     });
   }, [theme]);
-  const tabsJSX = normalizedTabs.map((item, index) => {
+  const renderTab = (0, _ahooks.useMemoizedFn)((tab, index) => {
+    const isActive = activeValue === tab.value;
+    const badgeCount = tab.badge !== undefined ? typeof tab.badge === 'number' ? tab.badge : undefined : undefined;
+    if (variant === 'label') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        onLayout: genOnLayoutTab(index),
+        style: [{
+          paddingVertical: 10,
+          zIndex: tabNum - index
+        }, equalWidth && {
+          flex: 1
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Badge, {
+          count: badgeCount,
+          visible: tab.badge !== undefined,
+          size: "small",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            activeOpacity: 0.7,
+            onPress: () => genOnPress(tab, index),
+            style: [styles.labelTab, isActive && styles.labelTabActive, equalWidth && {
+              alignSelf: 'stretch',
+              justifyContent: 'center',
+              alignItems: 'center'
+            }],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+              onLayout: genOnLayoutText(index),
+              style: [styles.labelText, isActive && styles.labelTextActive],
+              size: 14,
+              children: tab.label
+            })
+          })
+        })
+      }, tab.value);
+    }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      style: styles.tabItem,
-      onPress: () => genOnPress(item, index),
+      style: [styles.tabItem, {
+        zIndex: tabNum - index
+      }, equalWidth && {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+      }],
+      onPress: () => genOnPress(tab, index),
       onLayout: genOnLayoutTab(index),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
-        onLayout: genOnLayoutText(index),
-        children: item?.label
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Badge, {
+        count: badgeCount,
+        visible: tab.badge !== undefined,
+        size: "small",
+        offset: [-4, -4],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          color: isActive ? theme.palette.fontGray1 : theme.palette.fontGray2,
+          font: isActive ? 'semiBold' : 'regular',
+          onLayout: genOnLayoutText(index),
+          size: 14,
+          children: tab?.label
+        })
       })
-    }, item?.value);
+    }, tab?.value);
   });
   (0, _react.useEffect)(() => {
     if (state.layoutFinish) {
-      navigateTo(0);
+      const index = tabs.findIndex(item => item.value === activeValue);
+      navigateTo(index === -1 ? 0 : index);
     }
-  }, [state.layoutFinish]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.layoutFinish, activeValue]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: styles.container,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
@@ -116,22 +168,15 @@ const Tabs = ({
       horizontal: true,
       showsHorizontalScrollIndicator: false,
       onLayout: onLayoutScrollView,
+      scrollEnabled: !equalWidth,
       contentContainerStyle: {
         alignContent: 'center',
-        columnGap: 16
+        columnGap: 8,
+        flexGrow: equalWidth ? 1 : 0,
+        paddingHorizontal: 16
       },
-      children: [tabsJSX, indicatorJSX]
+      children: [tabs.map(renderTab), indicatorJSX]
     })
   });
 };
-exports.Tabs = Tabs;
-const useStyles = (0, _index2.createThemedStyles)(() => {
-  return {
-    container: {
-      paddingHorizontal: 16
-    },
-    tabItem: {
-      paddingVertical: 16
-    }
-  };
-});
+exports.Tabs = Tabs;

package/dist/commonjs/components/base/tag/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+var _tag = require("./tag.js");
+Object.keys(_tag).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _tag[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _tag[key];
+    }
+  });
+});
+var _default = exports.default = _tag.Tag;

package/dist/commonjs/components/base/tag/style/index.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTagStyles = exports.useTagGroupStyles = void 0;
+var _index = require("../../../../native-provider/index.js");
+const useTagStyles = exports.useTagStyles = (0, _index.createThemedStyles)((theme, props) => {
+  const {
+    themeColor = 'primary'
+  } = props;
+  const BASE_COLOR_MAP = {
+    primary: {
+      baseColor: theme.palette.brand7,
+      lightColor: theme.palette.brand1
+    },
+    danger: {
+      baseColor: theme.palette.error6,
+      lightColor: theme.palette.error1
+    },
+    default: {
+      baseColor: theme.palette.gray6,
+      lightColor: theme.palette.gray2
+    }
+  };
+  const Color = BASE_COLOR_MAP[themeColor];
+  return {
+    tag: {},
+    large: {
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+      borderRadius: 4
+    },
+    medium: {
+      paddingHorizontal: 6,
+      paddingVertical: 2,
+      borderRadius: 2
+    },
+    small: {
+      paddingHorizontal: 4,
+      paddingVertical: 1.5,
+      borderRadius: 1.5
+    },
+    disabled: {
+      opacity: 0.5
+    },
+    'font-small': {
+      fontSize: 10
+    },
+    'font-medium': {
+      fontSize: 12
+    },
+    'font-large': {
+      fontSize: 14
+    },
+    filled: {
+      backgroundColor: Color.lightColor
+    },
+    'text-filled': {
+      color: Color.baseColor
+    },
+    outlined: {
+      borderColor: Color.baseColor,
+      borderWidth: 0.5
+    },
+    'text-outlined': {
+      color: Color.baseColor
+    },
+    solid: {
+      backgroundColor: Color.baseColor
+    },
+    'text-solid': {
+      color: '#fff'
+    }
+  };
+});
+const useTagGroupStyles = exports.useTagGroupStyles = (0, _index.createThemedStyles)(() => {
+  return {
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      flexWrap: 'wrap'
+    },
+    vertical: {
+      flexDirection: 'column',
+      alignItems: 'stretch'
+    }
+  };
+});

package/dist/commonjs/components/base/tag/tag-context.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TagContext = void 0;
+var _react = require("react");
+const TagContext = exports.TagContext = /*#__PURE__*/(0, _react.createContext)({
+  size: 'medium',
+  disabled: false
+});
+TagContext.displayName = 'TagContext';

package/dist/commonjs/components/base/tag/tag-group.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TagGroup = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _index = require("./style/index.js");
+var _tagContext = require("./tag-context.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TagGroup = ({
+  children,
+  direction = 'horizontal',
+  gap = 16,
+  style,
+  size,
+  disabled
+}) => {
+  const groupStyles = (0, _index.useTagGroupStyles)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tagContext.TagContext.Provider, {
+    value: {
+      size,
+      disabled
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [groupStyles.container, direction === 'vertical' && groupStyles.vertical, gap > 0 && {
+        gap
+      }, style],
+      children: children
+    })
+  });
+};
+exports.TagGroup = TagGroup;

package/dist/commonjs/components/base/tag/tag.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tag = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("./../index.js");
+var _index2 = require("./style/index.js");
+var _tagContext = require("./tag-context.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const Tag = ({
+  text,
+  variant = 'solid',
+  style,
+  theme = 'primary',
+  disabled: customDisabled,
+  size,
+  child,
+  textStyle,
+  onPress
+}) => {
+  const context = (0, _react.use)(_tagContext.TagContext);
+  const mergedDisabled = customDisabled ?? context.disabled ?? false;
+  const mergedSize = size ?? context.size ?? 'medium';
+  const styles = (0, _index2.useTagStyles)({
+    variant,
+    themeColor: theme,
+    mergedSize
+  });
+  const tagStyle = (0, _react.useMemo)(() => {
+    return [styles.tag, styles[variant], styles[mergedSize], style];
+  }, [mergedSize, style, variant, styles]);
+  const tagNode = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    style: tagStyle,
+    onPress: mergedDisabled ? undefined : onPress,
+    disabled: mergedDisabled,
+    children: child ? child : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+      style: [styles[`text-${variant}`], styles[`font-${mergedSize}`], textStyle],
+      children: text
+    })
+  });
+  return tagNode;
+};
+exports.Tag = Tag;

package/dist/commonjs/components/base/tag/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/commonjs/native-provider/native-provider.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NativeProvider = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
 var _index = require("../components/base/index.js");
 var _index2 = require("../shared/theme/index.js");
 var _index3 = require("./contexts/index.js");
@@ -19,9 +18,9 @@ const NativeProvider = ({
   children,
   navigators,
   errorBoundary,
-  request = null
+  request = null,
+  portalHostProps
 }) => {
-  const isNative = _reactNative.Platform.OS !== 'web';
   const themeContextValue = (0, _react.useMemo)(() => (0, _index2.createTheme)(theme), [theme]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_safeAreaCompactProvider.SafeAreaCompactProvider, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.ConfigContext, {
@@ -34,9 +33,10 @@ const NativeProvider = ({
           value: themeContextValue,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_errorBoundary.ErrorBoundary, {
             ...errorBoundary,
-            children: isNative ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Portal.Host, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Portal.Host, {
+              ...portalHostProps,
               children: children
-            }) : children
+            })
           })
         })
       })

package/dist/commonjs/shared/utils/index.js

@@ -24,4 +24,15 @@ Object.keys(_error).forEach(function (key) {
       return _error[key];
     }
   });
+});
+var _object = require("./object.js");
+Object.keys(_object).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _object[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _object[key];
+    }
+  });
 });

package/dist/commonjs/shared/utils/object.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shallowEqual = void 0;
+var _lodashEs = require("lodash-es");
+/**
+ * 浅比较两个对象是否相等
+ *
+ * 仅比较对象的第一层属性，使用严格相等（===）进行比较。
+ * 不会递归比较嵌套对象或数组的内容。
+ *
+ * @param a - 第一个对象
+ * @param b - 第二个对象
+ * @returns 如果两个对象的所有第一层属性都相等则返回 true，否则返回 false。如果 a/b 有一个非对象，则直接比较二者
+ *
+ * @example
+ * shallowEqual({ a: 1, b: 2 }, { a: 1, b: 2 }); // true
+ * shallowEqual({ a: 1 }, { a: 1, b: 2 }); // false
+ * shallowEqual({ a: { x: 1 } }, { a: { x: 1 } }); // false
+ * shallowEqual(null, null); // true
+ * shallowEqual(null, undefined); // false
+ * shallowEqual(1, 1); // true
+ * shallowEqual(1, '1'); // false
+ */
+const shallowEqual = (a, b) => {
+  if ((0, _lodashEs.isNil)(a) || (0, _lodashEs.isNil)(b)) {
+    return a === b;
+  }
+  if (typeof a !== 'object' || typeof b !== 'object') {
+    return a === b;
+  }
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  return aKeys.every(key => a[key] === b[key]);
+};
+exports.shallowEqual = shallowEqual;

package/dist/module/components/base/carousel/carousel-indicator.js

@@ -0,0 +1,51 @@
+"use strict";
+
+import { View } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 轮播图指示器渲染组件
+ *
+ * 负责渲染轮播图底部的指示器（小圆点），支持自定义指示器或使用默认样式。
+ * 当轮播项总数小于等于 1 时，不显示指示器。
+ *
+ * @param props - 组件属性配置
+ * @param props.indicator - 指示器配置（false 表示不显示，函数表示自定义渲染）
+ * @param props.indicatorProps - 指示器属性配置（颜色、样式）
+ * @param props.total - 轮播项总数
+ * @param props.current - 当前激活的索引
+ * @param props.activeColor - 激活状态的指示器颜色
+ * @param props.inactiveColor - 非激活状态的指示器颜色
+ * @param props.styles - 指示器样式对象
+ *
+ * @returns 渲染的指示器内容或 null
+ */
+export const CarouselIndicator = props => {
+  const {
+    indicator,
+    indicatorProps,
+    total,
+    current,
+    activeColor,
+    inactiveColor,
+    styles
+  } = props;
+  if (indicator === false) return null;
+  if (total <= 1) return null;
+  if (typeof indicator === 'function') {
+    return indicator(total, current);
+  }
+  const dotActiveColor = indicatorProps?.color ?? activeColor;
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.indicatorContainer, indicatorProps?.style],
+    children: Array.from({
+      length: total
+    }, (_, i) => {
+      const isActive = i === current;
+      return /*#__PURE__*/_jsx(View, {
+        style: [styles.indicatorDot, {
+          backgroundColor: isActive ? dotActiveColor : inactiveColor
+        }, isActive && styles.indicatorDotActive]
+      }, i);
+    })
+  });
+};

package/dist/module/components/base/carousel/carousel-slides.js

@@ -0,0 +1,135 @@
+"use strict";
+
+import { useMemoizedFn } from 'ahooks';
+import { clamp } from 'lodash-es';
+import { useMemo } from 'react';
+import { View } from 'react-native';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 轮播图滑块渲染组件
+ *
+ * 负责渲染轮播图的滑块内容，使用 data + renderItem 模式。
+ * 实现虚拟渲染优化，仅渲染可见范围内的滑块，并处理循环播放时的克隆逻辑。
+ * 为虚拟渲染添加前后占位空间，确保滚动位置正确。
+ *
+ * @template Data - 数据项类型
+ * @param props - 组件属性配置
+ * @param props.data - 数据源数组
+ * @param props.renderItem - 渲染每一项的函数
+ * @param props.total - 轮播项总数
+ * @param props.virtualRange - 虚拟渲染范围（start、end、isVirtual）
+ * @param props.loopEnabled - 是否启用循环播放
+ * @param props.clonesBefore - 循环播放时前置克隆节点数量
+ * @param props.direction - 滑动方向
+ * @param props.slidePixels - 单个滑块的像素大小
+ * @param props.extTotal - 扩展后的总数（包含克隆节点）
+ *
+ * @returns 渲染的滑块内容或 null
+ */
+export const CarouselSlides = props => {
+  const {
+    data,
+    renderItem,
+    total,
+    virtualRange,
+    loopEnabled,
+    clonesBefore,
+    direction,
+    slidePixels,
+    extTotal
+  } = props;
+
+  // 计算滑块包装器样式
+  const slideWrapperStyle = useMemo(() => {
+    return direction === 'horizontal' ? {
+      width: slidePixels,
+      height: '100%'
+    } : {
+      height: slidePixels,
+      width: '100%'
+    };
+  }, [direction, slidePixels]);
+
+  // 计算虚拟渲染的占位空间样式
+  const spacerStyles = useMemo(() => {
+    if (!virtualRange) return null;
+    const {
+      start,
+      end
+    } = virtualRange;
+    const leadingSize = start * slidePixels;
+    const trailingSize = (extTotal - end - 1) * slidePixels;
+    return {
+      leading: direction === 'horizontal' ? {
+        width: leadingSize
+      } : {
+        height: leadingSize
+      },
+      trailing: direction === 'horizontal' ? {
+        width: trailingSize
+      } : {
+        height: trailingSize
+      },
+      leadingSize,
+      trailingSize
+    };
+  }, [virtualRange, slidePixels, extTotal, direction]);
+  const getIndexFromExtIndex = useMemoizedFn(extIndex => {
+    if (!loopEnabled) return clamp(extIndex, 0, total - 1);
+    if (extIndex < clonesBefore) {
+      return ((extIndex - clonesBefore) % total + total) % total;
+    }
+    if (extIndex >= clonesBefore + total) {
+      return (extIndex - clonesBefore - total) % total;
+    }
+    return extIndex - clonesBefore;
+  });
+
+  // 渲染滑块元素
+  const slideElements = useMemo(() => {
+    if (!virtualRange) return null;
+    const {
+      start,
+      end
+    } = virtualRange;
+    const elements = [];
+    const getElementForExtIndex = extIndex => {
+      const logicalIndex = loopEnabled ? getIndexFromExtIndex(extIndex) : clamp(extIndex, 0, total - 1);
+      const item = data[logicalIndex];
+      return renderItem(item, logicalIndex);
+    };
+    for (let extIndex = start; extIndex <= end; extIndex += 1) {
+      const element = getElementForExtIndex(extIndex);
+      if (!element) continue;
+      elements.push(/*#__PURE__*/_jsx(View, {
+        style: slideWrapperStyle,
+        children: element
+      }, extIndex));
+    }
+    return elements;
+  }, [virtualRange, loopEnabled, total, data, renderItem, slideWrapperStyle, getIndexFromExtIndex]);
+
+  // 前置占位空间
+  const leadSpacer = useMemo(() => {
+    if (!virtualRange?.isVirtual || !spacerStyles || spacerStyles.leadingSize <= 0) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx(View, {
+      style: spacerStyles.leading
+    });
+  }, [virtualRange?.isVirtual, spacerStyles]);
+
+  // 后置占位空间
+  const trailSpacer = useMemo(() => {
+    if (!virtualRange?.isVirtual || !spacerStyles || spacerStyles.trailingSize <= 0) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx(View, {
+      style: spacerStyles.trailing
+    });
+  }, [virtualRange?.isVirtual, spacerStyles]);
+  if (!virtualRange) return null;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [leadSpacer, slideElements, trailSpacer]
+  });
+};