@mpxjs/webpack-plugin 2.10.17 → 2.10.18-beta.2

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

@@ -42,17 +42,23 @@ import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, ext
 import { IntersectionObserverContext, ScrollViewContext } from './context';
 import Portal from './mpx-portal';
 const AnimatedScrollView = RNAnimated.createAnimatedComponent(ScrollView);
+const REFRESH_COLOR = {
+    black: ['#000'],
+    white: ['#fff']
+};
 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 = false, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'refresher-threshold': refresherThreshold = 45, '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, 'enable-sticky': enableSticky, 'scroll-event-throttle': scrollEventThrottle = 0, 'scroll-into-view-offset': scrollIntoViewOffset = 0, __selectRef } = props;
+    const { enhanced = false, bounces = true, style = {}, binddragstart, binddragging, binddragend, bindtouchmove, '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 = false, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'refresher-threshold': refresherThreshold = 45, '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, 'enable-sticky': enableSticky, 'scroll-event-throttle': scrollEventThrottle = 0, 'scroll-into-view-offset': scrollIntoViewOffset = 0, __selectRef } = props;
     const scrollOffset = useRef(new RNAnimated.Value(0)).current;
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
     const waitForHandlers = flatGesture(waitFor);
+    const { refresherContent, otherContent } = getRefresherContent(props.children);
+    const hasRefresher = refresherContent && refresherEnabled;
     const [refreshing, setRefreshing] = useState(false);
     const [enableScroll, setEnableScroll] = useState(true);
-    const enableScrollValue = useSharedValue(true);
     const [scrollBounces, setScrollBounces] = useState(false);
-    const bouncesValue = useSharedValue(!!false);
+    const enableScrollValue = useSharedValue(true);
+    const bouncesValue = useSharedValue(false);
     const translateY = useSharedValue(0);
     const isAtTop = useSharedValue(true);
     const refresherHeight = useSharedValue(0);
@@ -68,13 +74,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const initialTimeout = useRef(null);
     const intersectionObservers = useContext(IntersectionObserverContext);
     const firstScrollIntoViewChange = useRef(true);
-    const refreshColor = {
-        black: ['#000'],
-        white: ['#fff']
-    };
     const isContentSizeChange = useRef(false);
-    const { refresherContent, otherContent } = getRefresherContent(props.children);
-    const hasRefresher = refresherContent && refresherEnabled;
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
     const scrollViewRef = useRef(null);
@@ -455,67 +455,71 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             runOnJS(runOnJSCallback)('setScrollBounces', newValue);
         }
     }
-    // 处理下拉刷新的手势
-    const panGesture = Gesture.Pan()
-        .onUpdate((event) => {
-        'worklet';
-        if (enhanced && !!bounces) {
-            if (event.translationY > 0 && bouncesValue.value) {
-                updateBouncesState(false);
+    // 处理下拉刷新的手势 - 使用 useMemo 避免每次渲染都创建
+    const panGesture = useMemo(() => {
+        if (!hasRefresher)
+            return Gesture.Pan(); // 返回空手势
+        return Gesture.Pan()
+            .onUpdate((event) => {
+            'worklet';
+            if (enhanced && !!bounces) {
+                if (event.translationY > 0 && bouncesValue.value) {
+                    updateBouncesState(false);
+                }
+                else if ((event.translationY < 0) && !bouncesValue.value) {
+                    updateBouncesState(true);
+                }
             }
-            else if ((event.translationY < 0) && !bouncesValue.value) {
-                updateBouncesState(true);
+            if (translateY.value <= 0 && event.translationY < 0) {
+                // 滑动到顶再向上开启滚动
+                updateScrollState(true);
             }
-        }
-        if (translateY.value <= 0 && event.translationY < 0) {
-            // 滑动到顶再向上开启滚动
-            updateScrollState(true);
-        }
-        else if (event.translationY > 0 && isAtTop.value) {
-            // 滚动到顶再向下禁止滚动
-            updateScrollState(false);
-        }
-        // 禁止滚动后切换为滑动
-        if (!enableScrollValue.value && isAtTop.value) {
+            else if (event.translationY > 0 && isAtTop.value) {
+                // 滚动到顶再向下禁止滚动
+                updateScrollState(false);
+            }
+            // 禁止滚动后切换为滑动
+            if (!enableScrollValue.value && isAtTop.value) {
+                if (refreshing) {
+                    // 从完全展开状态(refresherHeight.value)开始计算偏移
+                    translateY.value = Math.max(0, Math.min(refresherHeight.value, refresherHeight.value + event.translationY));
+                }
+                else if (event.translationY > 0) {
+                    // 非刷新状态下的下拉逻辑保持不变
+                    translateY.value = Math.min(event.translationY * 0.6, refresherHeight.value);
+                }
+            }
+        })
+            .onEnd((event) => {
+            'worklet';
+            if (enableScrollValue.value)
+                return;
             if (refreshing) {
-                // 从完全展开状态(refresherHeight.value)开始计算偏移
-                translateY.value = Math.max(0, Math.min(refresherHeight.value, refresherHeight.value + event.translationY));
+                // 刷新状态下，根据滑动距离决定是否隐藏
+                // 如果向下滑动没超过 refresherThreshold，就完全隐藏，如果向上滑动完全隐藏
+                if ((event.translationY > 0 && translateY.value < refresherThreshold) || event.translationY < 0) {
+                    translateY.value = withTiming(0);
+                    updateScrollState(true);
+                    runOnJS(runOnJSCallback)('setRefreshing', false);
+                }
+                else {
+                    translateY.value = withTiming(refresherHeight.value);
+                }
             }
-            else if (event.translationY > 0) {
-                // 非刷新状态下的下拉逻辑保持不变
-                translateY.value = Math.min(event.translationY * 0.6, refresherHeight.value);
+            else if (event.translationY >= refresherHeight.value) {
+                // 触发刷新
+                translateY.value = withTiming(refresherHeight.value);
+                runOnJS(runOnJSCallback)('onRefresh');
             }
-        }
-    })
-        .onEnd((event) => {
-        'worklet';
-        if (enableScrollValue.value)
-            return;
-        if (refreshing) {
-            // 刷新状态下，根据滑动距离决定是否隐藏
-            // 如果向下滑动没超过 refresherThreshold，就完全隐藏，如果向上滑动完全隐藏
-            if ((event.translationY > 0 && translateY.value < refresherThreshold) || event.translationY < 0) {
+            else {
+                // 回弹
                 translateY.value = withTiming(0);
                 updateScrollState(true);
                 runOnJS(runOnJSCallback)('setRefreshing', false);
             }
-            else {
-                translateY.value = withTiming(refresherHeight.value);
-            }
-        }
-        else if (event.translationY >= refresherHeight.value) {
-            // 触发刷新
-            translateY.value = withTiming(refresherHeight.value);
-            runOnJS(runOnJSCallback)('onRefresh');
-        }
-        else {
-            // 回弹
-            translateY.value = withTiming(0);
-            updateScrollState(true);
-            runOnJS(runOnJSCallback)('setRefreshing', false);
-        }
-    })
-        .simultaneousWithExternalGesture(scrollViewRef);
+        })
+            .simultaneousWithExternalGesture(scrollViewRef);
+    }, [hasRefresher, enhanced, bounces, refreshing, refresherThreshold]);
     const scrollAdditionalProps = extendObject({
         style: extendObject(hasOwn(innerStyle, 'flex') || hasOwn(innerStyle, 'flexGrow')
             ? {}
@@ -575,29 +579,31 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         'bindrefresherrefresh'
     ], { layoutRef });
     const ScrollViewComponent = enableSticky ? AnimatedScrollView : ScrollView;
-    const withRefresherScrollView = createElement(GestureDetector, { gesture: panGesture }, createElement(ScrollViewComponent, innerProps, createElement(Animated.View, { style: [refresherAnimatedStyle, refresherLayoutStyle], onLayout: onRefresherLayout }, refresherContent), createElement(Animated.View, { style: contentAnimatedStyle }, createElement(ScrollViewContext.Provider, { value: contextValue }, wrapChildren(extendObject({}, props, { children: otherContent }), {
-        hasVarDec,
-        varContext: varContextRef.current,
-        textStyle,
-        textProps
-    })))));
-    const commonScrollView = createElement(ScrollViewComponent, extendObject({}, innerProps, {
-        refreshControl: refresherEnabled
+    const createScrollViewContent = () => {
+        const wrappedChildren = wrapChildren(hasRefresher ? extendObject({}, props, { children: otherContent }) : props, {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+        });
+        return createElement(ScrollViewContext.Provider, { value: contextValue }, wrappedChildren);
+    };
+    const withRefresherScrollView = () => {
+        return createElement(GestureDetector, { gesture: panGesture }, createElement(ScrollViewComponent, innerProps, createElement(Animated.View, { style: [refresherAnimatedStyle, refresherLayoutStyle], onLayout: onRefresherLayout }, refresherContent), createElement(Animated.View, { style: contentAnimatedStyle }, createScrollViewContent())));
+    };
+    const commonScrollView = () => {
+        const refreshControl = refresherEnabled
             ? createElement(RefreshControl, extendObject({
                 progressBackgroundColor: refresherBackground,
                 refreshing: refreshing,
                 onRefresh: onRefresh
             }, refresherDefaultStyle && refresherDefaultStyle !== 'none'
-                ? { colors: refreshColor[refresherDefaultStyle] }
+                ? { colors: REFRESH_COLOR[refresherDefaultStyle] }
                 : {}))
-            : undefined
-    }), createElement(ScrollViewContext.Provider, { value: contextValue }, wrapChildren(props, {
-        hasVarDec,
-        varContext: varContextRef.current,
-        textStyle,
-        textProps
-    })));
-    let scrollViewComponent = hasRefresher ? withRefresherScrollView : commonScrollView;
+            : undefined;
+        return createElement(ScrollViewComponent, extendObject({}, innerProps, { refreshControl }), createScrollViewContent());
+    };
+    let scrollViewComponent = hasRefresher ? withRefresherScrollView() : commonScrollView();
     if (hasPositionFixed) {
         scrollViewComponent = createElement(Portal, null, scrollViewComponent);
     }

package/lib/runtime/components/react/dist/mpx-section-list.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+interface ListItem {
+    isSectionHeader?: boolean;
+    _originalItemIndex?: number;
+    [key: string]: any;
+}
+interface ItemHeightType {
+    value?: number;
+    getter?: (item: any, index: number) => number;
+}
+interface SectionListProps {
+    enhanced?: boolean;
+    bounces?: boolean;
+    scrollEventThrottle?: number;
+    height?: number | string;
+    width?: number | string;
+    listData?: ListItem[];
+    generichash?: string;
+    style?: Record<string, any>;
+    itemHeight?: ItemHeightType;
+    sectionHeaderHeight?: ItemHeightType;
+    listHeaderData?: any;
+    listHeaderHeight?: ItemHeightType;
+    useListHeader?: boolean;
+    listFooterData?: any;
+    useListFooter?: boolean;
+    'genericrecycle-item'?: string;
+    'genericsection-header'?: string;
+    'genericlist-header'?: string;
+    'genericlist-footer'?: string;
+    'enable-var'?: boolean;
+    'external-var-context'?: any;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    'enable-sticky'?: boolean;
+    'enable-back-to-top'?: boolean;
+    'end-reached-threshold'?: number;
+    'refresher-enabled'?: boolean;
+    'show-scrollbar'?: boolean;
+    'refresher-triggered'?: boolean;
+    bindrefresherrefresh?: (event: any) => void;
+    bindscrolltolower?: (event: any) => void;
+    bindscroll?: (event: any) => void;
+    [key: string]: any;
+}
+declare const _SectionList: React.ForwardRefExoticComponent<Omit<SectionListProps, "ref"> & React.RefAttributes<any>>;
+export default _SectionList;

package/lib/runtime/components/react/dist/mpx-section-list.jsx

@@ -0,0 +1,292 @@
+import React, { forwardRef, useRef, useState, useEffect, useMemo, createElement, useImperativeHandle, memo } from 'react';
+import { SectionList, RefreshControl } from 'react-native';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import { extendObject, useLayout, useTransformStyle } from './utils';
+const getGeneric = (generichash, generickey) => {
+    if (!generichash || !generickey)
+        return null;
+    const GenericComponent = global.__mpxGenericsMap?.[generichash]?.[generickey]?.();
+    if (!GenericComponent)
+        return null;
+    return memo(forwardRef((props, ref) => {
+        return createElement(GenericComponent, extendObject({}, {
+            ref: ref
+        }, props));
+    }));
+};
+const _SectionList = forwardRef((props = {}, ref) => {
+    const { enhanced = false, bounces = true, scrollEventThrottle = 0, height, width, listData, generichash, style = {}, itemHeight = {}, sectionHeaderHeight = {}, listHeaderHeight = {}, listHeaderData = null, useListHeader = false, listFooterData = null, useListFooter = false, 'genericrecycle-item': genericrecycleItem, 'genericsection-header': genericsectionHeader, 'genericlist-header': genericListHeader, 'genericlist-footer': genericListFooter, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'enable-sticky': enableSticky = false, 'enable-back-to-top': enableBackToTop = false, 'end-reached-threshold': onEndReachedThreshold = 0.1, 'refresher-enabled': refresherEnabled, 'show-scrollbar': showScrollbar = true, 'refresher-triggered': refresherTriggered } = props;
+    const [refreshing, setRefreshing] = useState(!!refresherTriggered);
+    const scrollViewRef = useRef(null);
+    const indexMap = useRef({});
+    const reverseIndexMap = useRef({});
+    const { hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef });
+    useEffect(() => {
+        if (refreshing !== refresherTriggered) {
+            setRefreshing(!!refresherTriggered);
+        }
+    }, [refresherTriggered]);
+    const onRefresh = () => {
+        const { bindrefresherrefresh } = props;
+        bindrefresherrefresh &&
+            bindrefresherrefresh(getCustomEvent('refresherrefresh', {}, { layoutRef }, props));
+    };
+    const onEndReached = () => {
+        const { bindscrolltolower } = props;
+        bindscrolltolower &&
+            bindscrolltolower(getCustomEvent('scrolltolower', {}, { layoutRef }, props));
+    };
+    const onScroll = (event) => {
+        const { bindscroll } = props;
+        bindscroll &&
+            bindscroll(getCustomEvent('scroll', event.nativeEvent, { layoutRef }, props));
+    };
+    // 通过sectionIndex和rowIndex获取原始索引
+    const getOriginalIndex = (sectionIndex, rowIndex) => {
+        const key = `${sectionIndex}_${rowIndex}`;
+        return reverseIndexMap.current[key] ?? -1; // 如果找不到，返回-1
+    };
+    const scrollToIndex = ({ index, animated, viewOffset = 0, viewPosition = 0 }) => {
+        if (scrollViewRef.current) {
+            // 通过索引映射表快速定位位置
+            const position = indexMap.current[index];
+            const [sectionIndex, itemIndex] = position.split('_');
+            scrollViewRef.current.scrollToLocation?.({
+                itemIndex: itemIndex === 'header' ? 0 : Number(itemIndex) + 1,
+                sectionIndex: Number(sectionIndex) || 0,
+                animated,
+                viewOffset,
+                viewPosition
+            });
+        }
+    };
+    const getItemHeight = ({ sectionIndex, rowIndex }) => {
+        if (!itemHeight) {
+            return 0;
+        }
+        if (itemHeight.getter) {
+            const item = convertedListData[sectionIndex].data[rowIndex];
+            // 使用getOriginalIndex获取原始索引
+            const originalIndex = getOriginalIndex(sectionIndex, rowIndex);
+            return itemHeight.getter?.(item, originalIndex) || 0;
+        }
+        else {
+            return itemHeight.value || 0;
+        }
+    };
+    const getSectionHeaderHeight = ({ sectionIndex }) => {
+        const item = convertedListData[sectionIndex];
+        const { hasSectionHeader } = item;
+        // 使用getOriginalIndex获取原始索引
+        const originalIndex = getOriginalIndex(sectionIndex, 'header');
+        if (!hasSectionHeader)
+            return 0;
+        if (sectionHeaderHeight.getter) {
+            return sectionHeaderHeight.getter?.(item, originalIndex) || 0;
+        }
+        else {
+            return sectionHeaderHeight.value || 0;
+        }
+    };
+    const convertedListData = useMemo(() => {
+        const sections = [];
+        let currentSection = null;
+        // 清空之前的索引映射
+        indexMap.current = {};
+        // 清空反向索引映射
+        reverseIndexMap.current = {};
+        // 处理 listData 为空的情况
+        if (!listData || !listData.length) {
+            return sections;
+        }
+        listData.forEach((item, index) => {
+            if (item.isSectionHeader) {
+                // 如果已经存在一个 section，先把它添加到 sections 中
+                if (currentSection) {
+                    sections.push(currentSection);
+                }
+                // 创建新的 section
+                currentSection = {
+                    headerData: item,
+                    data: [],
+                    hasSectionHeader: true,
+                    _originalItemIndex: index
+                };
+                // 为 section header 添加索引映射
+                const sectionIndex = sections.length;
+                indexMap.current[index] = `${sectionIndex}_header`;
+                // 添加反向索引映射
+                reverseIndexMap.current[`${sectionIndex}_header`] = index;
+            }
+            else {
+                // 如果没有当前 section，创建一个默认的
+                if (!currentSection) {
+                    // 创建默认section (无header的section)
+                    currentSection = {
+                        headerData: null,
+                        data: [],
+                        hasSectionHeader: false,
+                        _originalItemIndex: -1
+                    };
+                }
+                // 将 item 添加到当前 section 的 data 中
+                const itemIndex = currentSection.data.length;
+                currentSection.data.push(extendObject({}, item, {
+                    _originalItemIndex: index
+                }));
+                let sectionIndex;
+                // 为 item 添加索引映射 - 存储格式为: "sectionIndex_itemIndex"
+                if (!currentSection.hasSectionHeader && sections.length === 0) {
+                    // 在默认section中(第一个且无header)
+                    sectionIndex = 0;
+                    indexMap.current[index] = `${sectionIndex}_${itemIndex}`;
+                }
+                else {
+                    // 在普通section中
+                    sectionIndex = sections.length;
+                    indexMap.current[index] = `${sectionIndex}_${itemIndex}`;
+                }
+                // 添加反向索引映射
+                reverseIndexMap.current[`${sectionIndex}_${itemIndex}`] = index;
+            }
+        });
+        // 添加最后一个 section
+        if (currentSection) {
+            sections.push(currentSection);
+        }
+        return sections;
+    }, [listData]);
+    const { getItemLayout } = useMemo(() => {
+        const layouts = [];
+        let offset = 0;
+        if (useListHeader) {
+            // 计算列表头部的高度
+            offset += listHeaderHeight.getter?.() || listHeaderHeight.value || 0;
+        }
+        // 遍历所有 sections
+        convertedListData.forEach((section, sectionIndex) => {
+            // 添加 section header 的位置信息
+            const headerHeight = getSectionHeaderHeight({ sectionIndex });
+            layouts.push({
+                length: headerHeight,
+                offset,
+                index: layouts.length
+            });
+            offset += headerHeight;
+            // 添加该 section 中所有 items 的位置信息
+            section.data.forEach((item, itemIndex) => {
+                const contenteight = getItemHeight({ sectionIndex, rowIndex: itemIndex });
+                layouts.push({
+                    length: contenteight,
+                    offset,
+                    index: layouts.length
+                });
+                offset += contenteight;
+            });
+            // 添加该 section 尾部位置信息
+            // 因为即使 sectionList 没传 renderSectionFooter，getItemLayout 中的 index 的计算也会包含尾部节点
+            layouts.push({
+                length: 0,
+                offset,
+                index: layouts.length
+            });
+        });
+        return {
+            itemLayouts: layouts,
+            getItemLayout: (data, index) => layouts[index]
+        };
+    }, [convertedListData, useListHeader, itemHeight.value, itemHeight.getter, sectionHeaderHeight.value, sectionHeaderHeight.getter, listHeaderHeight.value, listHeaderHeight.getter]);
+    const scrollAdditionalProps = extendObject({
+        alwaysBounceVertical: false,
+        alwaysBounceHorizontal: false,
+        scrollEventThrottle: scrollEventThrottle,
+        scrollsToTop: enableBackToTop,
+        showsHorizontalScrollIndicator: showScrollbar,
+        onEndReachedThreshold,
+        ref: scrollViewRef,
+        bounces: false,
+        stickySectionHeadersEnabled: enableSticky,
+        onScroll: onScroll,
+        onEndReached: onEndReached
+    }, layoutProps);
+    if (enhanced) {
+        Object.assign(scrollAdditionalProps, {
+            bounces
+        });
+    }
+    if (refresherEnabled) {
+        Object.assign(scrollAdditionalProps, {
+            refreshing: refreshing
+        });
+    }
+    useImperativeHandle(ref, () => {
+        return {
+            ...props,
+            scrollToIndex
+        };
+    });
+    const innerProps = useInnerProps(extendObject({}, props, scrollAdditionalProps), [
+        'id',
+        'show-scrollbar',
+        'lower-threshold',
+        'refresher-triggered',
+        'refresher-enabled',
+        'bindrefresherrefresh'
+    ], { layoutRef });
+    // 使用 ref 保存最新的数据，避免数据变化时组件销毁重建
+    const listHeaderDataRef = useRef(listHeaderData);
+    listHeaderDataRef.current = listHeaderData;
+    const listFooterDataRef = useRef(listFooterData);
+    listFooterDataRef.current = listFooterData;
+    // 使用 useMemo 获取 GenericComponent 并创建渲染函数，避免每次组件更新都重新创建函数引用导致不必要的重新渲染
+    const renderItem = useMemo(() => {
+        const ItemComponent = getGeneric(generichash, genericrecycleItem);
+        if (!ItemComponent)
+            return undefined;
+        return ({ item }) => createElement(ItemComponent, { itemData: item });
+    }, [generichash, genericrecycleItem]);
+    const renderSectionHeader = useMemo(() => {
+        const SectionHeaderComponent = getGeneric(generichash, genericsectionHeader);
+        if (!SectionHeaderComponent)
+            return undefined;
+        return (sectionData) => {
+            if (!sectionData.section.hasSectionHeader)
+                return null;
+            return createElement(SectionHeaderComponent, { itemData: sectionData.section.headerData });
+        };
+    }, [generichash, genericsectionHeader]);
+    const ListHeaderComponent = useMemo(() => {
+        if (!useListHeader)
+            return null;
+        const ListHeaderGenericComponent = getGeneric(generichash, genericListHeader);
+        if (!ListHeaderGenericComponent)
+            return null;
+        return () => createElement(ListHeaderGenericComponent, { listHeaderData: listHeaderDataRef.current });
+    }, [useListHeader, generichash, genericListHeader]);
+    const ListFooterComponent = useMemo(() => {
+        if (!useListFooter)
+            return null;
+        const ListFooterGenericComponent = getGeneric(generichash, genericListFooter);
+        if (!ListFooterGenericComponent)
+            return null;
+        return () => createElement(ListFooterGenericComponent, { listFooterData: listFooterDataRef.current });
+    }, [useListFooter, generichash, genericListFooter]);
+    return createElement(SectionList, extendObject({
+        style: [{ height, width }, style, layoutStyle],
+        sections: convertedListData,
+        renderItem: renderItem,
+        getItemLayout: getItemLayout,
+        ListHeaderComponent: useListHeader ? ListHeaderComponent : null,
+        ListFooterComponent: useListFooter ? ListFooterComponent : null,
+        renderSectionHeader: renderSectionHeader,
+        refreshControl: refresherEnabled
+            ? React.createElement(RefreshControl, {
+                onRefresh: onRefresh,
+                refreshing: refreshing
+            })
+            : undefined
+    }, innerProps));
+});
+_SectionList.displayName = 'MpxSectionList';
+export default _SectionList;

package/lib/runtime/components/react/dist/mpx-simple-text.d.ts

@@ -5,4 +5,3 @@ declare const SimpleText: {
     displayName: string;
 };
 export default SimpleText;
-//# sourceMappingURL=mpx-simple-text.d.ts.map

package/lib/runtime/components/react/dist/mpx-simple-view.d.ts

@@ -5,4 +5,3 @@ declare const SimpleView: {
     displayName: string;
 };
 export default SimpleView;
-//# sourceMappingURL=mpx-simple-view.d.ts.map

package/lib/runtime/components/react/dist/mpx-slider.d.ts

@@ -28,4 +28,3 @@ export interface SliderProps {
 }
 declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HandlerRef<View, SliderProps>>>;
 export default Slider;
-//# sourceMappingURL=mpx-slider.d.ts.map

package/lib/runtime/components/react/dist/mpx-sticky-header.d.ts

@@ -15,4 +15,3 @@ interface StickyHeaderProps {
 }
 declare const _StickyHeader: import("react").ForwardRefExoticComponent<StickyHeaderProps & import("react").RefAttributes<HandlerRef<View, StickyHeaderProps>>>;
 export default _StickyHeader;
-//# sourceMappingURL=mpx-sticky-header.d.ts.map

package/lib/runtime/components/react/dist/mpx-sticky-header.jsx

@@ -8,9 +8,8 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners';
 const _StickyHeader = forwardRef((stickyHeaderProps = {}, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(stickyHeaderProps);
     const { style, bindstickontopchange, padding = [0, 0, 0, 0], 'offset-top': offsetTop = 0, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
-    const scrollViewContext = useContext(ScrollViewContext);
+    const { scrollOffset, gestureRef: scrollViewRef } = useContext(ScrollViewContext);
     const stickyContext = useContext(StickyContext);
-    const { scrollOffset } = scrollViewContext;
     const { registerStickyHeader, unregisterStickyHeader } = stickyContext;
     const headerRef = useRef(null);
     const isStickOnTopRef = useRef(false);
@@ -29,7 +28,6 @@ const _StickyHeader = forwardRef((stickyHeaderProps = {}, ref) => {
     }, []);
     function updatePosition() {
         if (headerRef.current) {
-            const scrollViewRef = scrollViewContext.gestureRef;
             if (scrollViewRef && scrollViewRef.current) {
                 headerRef.current.measureLayout(scrollViewRef.current, (left, top) => {
                     Animated.timing(headerTopAnimated, {
@@ -52,7 +50,7 @@ const _StickyHeader = forwardRef((stickyHeaderProps = {}, ref) => {
         style: normalStyle
     });
     useEffect(() => {
-        if (!bindstickontopchange)
+        if (!bindstickontopchange || !scrollOffset)
             return;
         const listener = scrollOffset.addListener((state) => {
             const currentScrollValue = state.value;
@@ -70,24 +68,26 @@ const _StickyHeader = forwardRef((stickyHeaderProps = {}, ref) => {
         return () => {
             scrollOffset.removeListener(listener);
         };
-    }, []);
+    }, [bindstickontopchange, scrollOffset]);
     const animatedStyle = useMemo(() => {
-        const translateY = Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, 1],
-            extrapolateLeft: 'clamp',
-            extrapolateRight: 'extend'
-        });
-        const finalTranslateY = offsetTop === 0
-            ? translateY
-            : Animated.add(translateY, Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
+        if (scrollOffset) {
+            const translateY = Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
                 inputRange: [0, 1],
-                outputRange: [0, offsetTop],
-                extrapolate: 'clamp'
-            }));
-        return {
-            transform: [{ translateY: finalTranslateY }]
-        };
+                outputRange: [0, 1],
+                extrapolateLeft: 'clamp',
+                extrapolateRight: 'extend'
+            });
+            const finalTranslateY = offsetTop === 0
+                ? translateY
+                : Animated.add(translateY, Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0, offsetTop],
+                    extrapolate: 'clamp'
+                }));
+            return {
+                transform: [{ translateY: finalTranslateY }]
+            };
+        }
     }, [scrollOffset, headerTopAnimated, offsetTop]);
     const innerProps = useInnerProps(extendObject({}, props, {
         ref: headerRef,

package/lib/runtime/components/react/dist/mpx-sticky-section.d.ts

@@ -13,4 +13,3 @@ interface StickySectionProps {
 }
 declare const _StickySection: import("react").ForwardRefExoticComponent<StickySectionProps & import("react").RefAttributes<HandlerRef<View, StickySectionProps>>>;
 export default _StickySection;
-//# sourceMappingURL=mpx-sticky-section.d.ts.map