@mpxjs/webpack-plugin 2.10.7 → 2.10.8-beta.3

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { View } from 'react-native';
+import { TimeProps } from './type';
+import { HandlerRef } from '../useNodesRef';
+declare const PickerTime: React.ForwardRefExoticComponent<Omit<TimeProps, "ref"> & React.RefAttributes<HandlerRef<View, TimeProps>>>;
+export default PickerTime;

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

@@ -0,0 +1,106 @@
+import React from 'react';
+export declare const enum PickerMode {
+    SELECTOR = "selector",
+    MULTI_SELECTOR = "multiSelector",
+    TIME = "time",
+    DATE = "date",
+    REGION = "region"
+}
+export type PickerValue = number;
+export type Obj = Record<string, any>;
+export type RangeItem = Obj | number | string;
+export type TimeValue = `${number}-${number}-${number}` | '';
+/** 通用属性 */
+export interface BasePickerProps {
+    /** --- 小程序属性 --- */
+    /** 选择器类型, 默认值 selector */
+    mode?: PickerMode;
+    /** 是否禁用, 默认值 false */
+    disabled?: boolean;
+    /** 点击取消按钮时触发 */
+    bindcancel?: Function;
+    /** 头部标题 */
+    'header-text'?: string;
+    /** --- 内部组件属性 --- */
+    /** 作为表单组件时的名称 */
+    name?: string;
+    style?: Record<string, any>;
+    children?: React.ReactNode;
+    range?: RangeItem[];
+    ref?: any;
+}
+export interface SelectorProps extends BasePickerProps {
+    mode: PickerMode.SELECTOR;
+    /**  默认值 0 */
+    value?: number;
+    /** 默认值 [] */
+    range?: RangeItem[];
+    'range-key'?: string;
+    /** 点击确认按钮后触发 change 事件, event.detail = {value} */
+    bindchange?: Function;
+}
+export interface MultiSelectorProps extends BasePickerProps {
+    mode: PickerMode.MULTI_SELECTOR;
+    /** 默认值 [] */
+    value?: number[];
+    range?: RangeItem[];
+    'range-key'?: string;
+    bindchange?: Function;
+    bindcolumnchange?: Function;
+}
+export interface TimeProps extends BasePickerProps {
+    mode: PickerMode.TIME;
+    /** 表示选中的时间，格式为"hh:mm" */
+    value?: string;
+    start?: string;
+    end?: string;
+    bindchange?: Function;
+}
+export interface DateProps extends BasePickerProps {
+    mode: PickerMode.DATE;
+    /** 默认值 '' */
+    value?: TimeValue;
+    start?: TimeValue;
+    end?: TimeValue;
+    /** 有效值 year,month,day，表示选择器的粒度 */
+    fields?: 'day' | 'month' | 'year';
+    bindchange?: Function;
+}
+export interface RegionProps extends BasePickerProps {
+    mode: PickerMode.REGION;
+    /** 表示选中的省市区，默认选中每一列的第一个值, 默认值 [] */
+    value?: string[];
+    /** 默认值 region */
+    level?: 'province' | 'city' | 'region' | 'sub-district';
+    /** 可为每一列的顶部添加一个自定义的项 */
+    'custom-item'?: string;
+    /** value 改变时触发 change 事件, event.detail = {value, code, postcode},
+     * 其中字段 code 是统计用区划代码, postcode 是邮政编码 */
+    bindchange?: Function;
+}
+export interface RegionObj {
+    value: string;
+    code: string;
+    postcode?: string;
+    children?: RegionObj[];
+}
+export interface PickerData {
+    value: string;
+    label: string;
+    children?: Object[];
+}
+export interface EventType {
+    detail: {
+        value: PickerValue[];
+    };
+}
+export interface LayoutType {
+    nativeEvent: {
+        layout: Obj;
+    };
+}
+export interface FormType {
+    name: string;
+}
+export type PickerProps = SelectorProps | MultiSelectorProps | TimeProps | DateProps | RegionProps;
+export type LanguageCode = 'zh-CN' | 'en-US';

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

@@ -0,0 +1,31 @@
+import { View } from 'react-native';
+import React from 'react';
+import { HandlerRef } from '../useNodesRef';
+import type { AnyFunc } from '../types/common';
+/**
+ * ✔ value
+ * ✔ bindchange
+ * ✘ bindpickstart
+ * ✘ bindpickend
+ * ✔ mask-class
+ * ✔ indicator-style: 优先级indicator-style.height > pick-view-column中的子元素设置的height
+ * WebView Only:
+ * ✔ indicator-class
+ * ✔ mask-style
+ * ✘ immediate-change
+ */
+interface PickerViewProps {
+    children: React.ReactNode;
+    value?: Array<number>;
+    bindchange?: AnyFunc;
+    style?: {
+        [key: string]: any;
+    };
+    'indicator-style'?: Record<string, any>;
+    'mask-style'?: Record<string, any>;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'enable-offset'?: boolean;
+}
+declare const _PickerView: React.ForwardRefExoticComponent<PickerViewProps & React.RefAttributes<HandlerRef<View, PickerViewProps>>>;
+export default _PickerView;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { SharedValue } from 'react-native-reanimated';
+type ContextValue = SharedValue<number>;
+export declare const PickerViewColumnAnimationContext: import("react").Context<ContextValue | undefined>;
+export declare const usePickerViewColumnAnimationContext: () => ContextValue;
+export declare const PickerViewStyleContext: import("react").Context<Record<string, any> | undefined>;
+export declare const usePickerViewStyleContext: () => Record<string, any> | undefined;
+export {};

package/lib/runtime/components/react/dist/mpx-picker-view-column/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+import { HandlerRef } from '../useNodesRef';
+interface ColumnProps {
+    columnIndex: number;
+    columnData: React.ReactNode[];
+    initialIndex: number;
+    onSelectChange: Function;
+    style: {
+        [key: string]: any;
+    };
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    wrapperStyle: {
+        height: number;
+        itemHeight: number;
+    };
+    pickerMaskStyle: Record<string, any>;
+    pickerIndicatorStyle: Record<string, any>;
+}
+declare const _PickerViewColumn: React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<HandlerRef<ScrollView & View, ColumnProps>>>;
+export default _PickerViewColumn;

package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewColumnItem.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { LayoutChangeEvent } from 'react-native';
+interface PickerColumnItemProps {
+    item: React.ReactElement;
+    index: number;
+    itemHeight: number;
+    itemWidth?: number | '100%';
+    textStyle: Record<string, any>;
+    visibleCount: number;
+    textProps?: any;
+    onItemLayout?: (e: LayoutChangeEvent) => void;
+}
+declare const PickerViewColumnItem: React.FC<PickerColumnItemProps>;
+export default PickerViewColumnItem;

package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewFaces.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Borrowed from open-source code: https://github.com/quidone/react-native-wheel-picker
+ * Special thanks to the authors for their contribution to the open-source community.
+ */
+export type Faces = {
+    index: number;
+    deg: number;
+    offsetY: number;
+    opacity: number;
+    scale: number;
+    screenHeight: number;
+};
+export declare const degToRad: (deg: number) => number;
+export declare const calcPickerHeight: (faces: Faces[], itemHeight: number) => number;
+export declare const calcHeightOffsets: (itemHeight: number) => number[];
+export declare const createFaces: (itemHeight: number, visibleCount: number) => Faces[];

package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewIndicator.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+type IndicatorProps = {
+    itemHeight: number;
+    indicatorItemStyle?: StyleProp<ViewStyle>;
+    indicatorContainerStyle?: StyleProp<ViewStyle>;
+};
+declare const _PickerViewIndicator: {
+    ({ itemHeight, indicatorItemStyle, indicatorContainerStyle }: IndicatorProps): React.JSX.Element;
+    displayName: string;
+};
+export default _PickerViewIndicator;

package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewMask.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+type MaskProps = {
+    itemHeight: number;
+    maskContainerStyle?: StyleProp<ViewStyle>;
+};
+declare const _PickerViewMask: {
+    ({ itemHeight, maskContainerStyle }: MaskProps): React.JSX.Element;
+    displayName: string;
+};
+export default _PickerViewMask;

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

@@ -0,0 +1,22 @@
+import { ReactElement } from 'react';
+import { PopupBaseProps } from './popupBase';
+export declare const enum PopupType {
+    PICKER = "picker"
+}
+export interface IUsePopupOptions {
+    modal?: React.ComponentType<PopupBaseProps>;
+    type?: PopupType;
+}
+/**
+ * 基于 Portal 封装的 Popup 弹窗组件管理 Hooks
+ */
+declare const createPopupManager: (options?: IUsePopupOptions) => {
+    open: (childComponent: React.ReactNode, pageId: number | undefined, options?: {
+        contentHeight?: number;
+    }) => void;
+    show: () => void;
+    hide: () => void;
+    update: (updatedChild: ReactElement | null) => void;
+    remove: () => void;
+};
+export { createPopupManager };

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export interface PopupBaseProps {
+    children?: React.ReactNode;
+    hide?: () => void;
+    contentHeight?: number;
+    visible?: boolean;
+}
+/**
+ * 类似微信 picker 弹窗的动画效果都可以复用此类容器
+ * 其他特定类型的弹窗容器组件可以在此基础上封装，或者扩展实现
+ */
+declare const PopupBase: {
+    (props?: PopupBaseProps): import("react").JSX.Element;
+    displayName: string;
+};
+export default PopupBase;

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

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export type PortalProps = {
+    children?: ReactNode;
+};
+declare const Portal: {
+    ({ children }: PortalProps): null;
+    Host: ({ children }: {
+        children: ReactNode;
+        pageId: number;
+    }) => JSX.Element;
+    add: (e: ReactNode, id: number | null) => number;
+    remove: (key: number) => void;
+    update: (key: number, e: ReactNode) => void;
+};
+export default Portal;

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

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+type PortalHostProps = {
+    children: ReactNode;
+    pageId: number;
+};
+export type Operation = {
+    type: 'mount';
+    key: number;
+    children: ReactNode;
+} | {
+    type: 'update';
+    key: number;
+    children: ReactNode;
+} | {
+    type: 'unmount';
+    key: number;
+};
+declare class PortalGuard {
+    private nextKey;
+    add: (e: ReactNode, id: number | null) => number;
+    remove: (key: number) => void;
+    update: (key: number, e: ReactNode) => void;
+}
+/**
+ * portal
+ */
+export declare const portal: PortalGuard;
+declare const PortalHost: ({ children }: PortalHostProps) => JSX.Element;
+export default PortalHost;

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

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export type State = {
+    portals: Array<{
+        key: number;
+        children: ReactNode;
+    }>;
+};
+declare const _PortalManager: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+export default _PortalManager;

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

@@ -0,0 +1,20 @@
+/**
+ * ✔ bindchange
+ */
+import { ReactNode } from 'react';
+import { View, NativeSyntheticEvent, ViewStyle } from 'react-native';
+import { HandlerRef } from './useNodesRef';
+export interface RadioGroupProps {
+    name: string;
+    style?: ViewStyle & Record<string, any>;
+    'enable-offset'?: boolean;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    children: ReactNode;
+    bindchange?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+}
+declare const radioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HandlerRef<View, RadioGroupProps>>>;
+export default radioGroup;

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

@@ -0,0 +1,26 @@
+/**
+ * ✔ value
+ * ✔ disabled
+ * ✔ checked
+ * ✔ color
+ */
+import { ReactNode } from 'react';
+import { View, ViewStyle, NativeSyntheticEvent } from 'react-native';
+import { HandlerRef } from './useNodesRef';
+export interface RadioProps {
+    value?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    color?: string;
+    style?: ViewStyle & Record<string, any>;
+    'enable-offset'?: boolean;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    children: ReactNode;
+    bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+}
+declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HandlerRef<View, RadioProps>>>;
+export default Radio;

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

@@ -0,0 +1 @@
+export declare const generateHTML: (html: string) => string;

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

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+/**
+ * ✔ nodes
+ */
+import { View, ViewProps, ViewStyle } from 'react-native';
+import { HandlerRef } from '../useNodesRef';
+type Node = {
+    type: 'node' | 'text';
+    name?: string;
+    attrs?: any;
+    children?: Array<Node>;
+    text: string;
+};
+interface _RichTextProps extends ViewProps {
+    style?: ViewStyle;
+    nodes: string | Array<Node>;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+}
+declare const _RichText: import("react").ForwardRefExoticComponent<_RichTextProps & import("react").RefAttributes<HandlerRef<View, _RichTextProps>>>;
+export default _RichText;

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

@@ -0,0 +1,14 @@
+/**
+ * ✔ enable
+ */
+import { ReactNode } from 'react';
+interface RootPortalProps {
+    enable?: boolean;
+    children: ReactNode;
+    [x: string]: any;
+}
+declare const _RootPortal: {
+    (props: RootPortalProps): import("react").FunctionComponentElement<import("./mpx-portal/index").PortalProps>;
+    displayName: string;
+};
+export default _RootPortal;

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

@@ -0,0 +1,54 @@
+import { View, NativeSyntheticEvent, NativeScrollEvent, ViewStyle } from 'react-native';
+import { ReactNode } from 'react';
+import { HandlerRef } from './useNodesRef';
+import { GestureHandler } from './utils';
+interface ScrollViewProps {
+    children?: ReactNode;
+    enhanced?: boolean;
+    bounces?: boolean;
+    style?: ViewStyle;
+    'scroll-x'?: boolean;
+    'scroll-y'?: boolean;
+    'enable-back-to-top'?: boolean;
+    'show-scrollbar'?: boolean;
+    'paging-enabled'?: boolean;
+    'upper-threshold'?: number;
+    'lower-threshold'?: number;
+    'scroll-with-animation'?: boolean;
+    'refresher-triggered'?: boolean;
+    'refresher-enabled'?: boolean;
+    'refresher-default-style'?: 'black' | 'white' | 'none';
+    'refresher-background'?: string;
+    'refresher-threshold'?: number;
+    'scroll-top'?: number;
+    'scroll-left'?: number;
+    'enable-offset'?: boolean;
+    'scroll-into-view'?: string;
+    'enable-trigger-intersection-observer'?: boolean;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    'enable-sticky'?: boolean;
+    'wait-for'?: Array<GestureHandler>;
+    'simultaneous-handlers'?: Array<GestureHandler>;
+    'scroll-event-throttle'?: number;
+    'scroll-into-view-offset'?: number;
+    bindscrolltoupper?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    bindscrolltolower?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    bindscroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    bindrefresherrefresh?: (event: NativeSyntheticEvent<unknown>) => void;
+    binddragstart?: (event: NativeSyntheticEvent<DragEvent>) => void;
+    binddragging?: (event: NativeSyntheticEvent<DragEvent>) => void;
+    binddragend?: (event: NativeSyntheticEvent<DragEvent>) => void;
+    bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent>) => void;
+    bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void;
+    bindtouchend?: (event: NativeSyntheticEvent<TouchEvent>) => void;
+    bindscrollend?: (event: NativeSyntheticEvent<TouchEvent>) => void;
+    __selectRef?: (selector: string, nodeType: 'node' | 'component', all?: boolean) => HandlerRef<any, any>;
+}
+declare const _ScrollView: import("react").ForwardRefExoticComponent<ScrollViewProps & import("react").RefAttributes<HandlerRef<import("react").ForwardRefExoticComponent<import("react-native").ScrollViewProps & {
+    children?: ReactNode;
+} & import("react-native-gesture-handler").NativeViewGestureHandlerProps & import("react").RefAttributes<import("react").ComponentType<any>>> & import("react-native").ScrollView & View, ScrollViewProps>>>;
+export default _ScrollView;

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

@@ -32,6 +32,7 @@
  * ✔ bindscroll
  */
 import { ScrollView, RefreshControl, Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { Animated as RNAnimated } from 'react-native';
 import { isValidElement, Children, useRef, useState, useEffect, forwardRef, useContext, useMemo, createElement } from 'react';
 import Animated, { useAnimatedRef, useSharedValue, withTiming, useAnimatedStyle, runOnJS } from 'react-native-reanimated';
 import { warn, hasOwn } from '@mpxjs/utils';
@@ -40,9 +41,11 @@ import useNodesRef from './useNodesRef';
 import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, HIDDEN_STYLE } from './utils';
 import { IntersectionObserverContext, ScrollViewContext } from './context';
 import Portal from './mpx-portal';
+const AnimatedScrollView = RNAnimated.createAnimatedComponent(ScrollView);
 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, 'scroll-event-throttle': scrollEventThrottle = 0, __selectRef } = props;
+    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 scrollOffset = useRef(new RNAnimated.Value(0)).current;
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
     const waitForHandlers = flatGesture(waitFor);
     const snapScrollTop = useRef(0);
@@ -66,7 +69,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const hasCallScrollToLower = useRef(false);
     const initialTimeout = useRef(null);
     const intersectionObservers = useContext(IntersectionObserverContext);
-    const firstScrollIntoViewChange = useRef(false);
+    const firstScrollIntoViewChange = useRef(true);
     const refreshColor = {
         black: ['#000'],
         white: ['#fff']
@@ -86,16 +89,18 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             pagingEnabled,
             fastDeceleration: false,
             decelerationDisabled: false,
-            scrollTo
+            scrollTo,
+            scrollIntoView: handleScrollIntoView
         },
         gestureRef: scrollViewRef
     });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout });
     const contextValue = useMemo(() => {
         return {
-            gestureRef: scrollViewRef
+            gestureRef: scrollViewRef,
+            scrollOffset
         };
     }, []);
-    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout });
     const hasRefresherLayoutRef = useRef(false);
     // layout 完成前先隐藏，避免安卓闪烁问题
     const refresherLayoutStyle = useMemo(() => { return !hasRefresherLayoutRef.current ? HIDDEN_STYLE : {}; }, [hasRefresherLayoutRef.current]);
@@ -115,14 +120,16 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     }, [scrollTop, scrollLeft]);
     useEffect(() => {
         if (scrollIntoView && __selectRef) {
-            if (!firstScrollIntoViewChange.current) {
-                setTimeout(handleScrollIntoView);
+            if (firstScrollIntoViewChange.current) {
+                setTimeout(() => {
+                    handleScrollIntoView(scrollIntoView, { offset: scrollIntoViewOffset, animated: scrollWithAnimation });
+                });
             }
             else {
-                handleScrollIntoView();
+                handleScrollIntoView(scrollIntoView, { offset: scrollIntoViewOffset, animated: scrollWithAnimation });
             }
         }
-        firstScrollIntoViewChange.current = true;
+        firstScrollIntoViewChange.current = false;
     }, [scrollIntoView]);
     useEffect(() => {
         if (refresherEnabled) {
@@ -142,13 +149,15 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     function scrollTo({ top = 0, left = 0, animated = false }) {
         scrollToOffset(left, top, animated);
     }
-    function handleScrollIntoView() {
-        const refs = __selectRef(`#${scrollIntoView}`, 'node');
+    function handleScrollIntoView(selector = '', { offset = 0, animated = true } = {}) {
+        const refs = __selectRef(`#${selector}`, 'node');
         if (!refs)
             return;
         const { nodeRef } = refs.getNodeInstance();
         nodeRef.current?.measureLayout(scrollViewRef.current, (left, top) => {
-            scrollToOffset(left, top);
+            const adjustedLeft = scrollX ? left + offset : left;
+            const adjustedTop = scrollY ? top + offset : top;
+            scrollToOffset(adjustedLeft, adjustedTop, animated);
         });
     }
     function selectLength(size) {
@@ -321,6 +330,12 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         updateScrollOptions(e, { scrollLeft, scrollTop });
         updateIntersection();
     }
+    const scrollHandler = RNAnimated.event([{ nativeEvent: { contentOffset: { y: scrollOffset } } }], {
+        useNativeDriver: true,
+        listener: (event) => {
+            onScroll(event);
+        }
+    });
     function onScrollDragStart(e) {
         hasCallScrollToLower.current = false;
         hasCallScrollToUpper.current = false;
@@ -481,7 +496,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         scrollEnabled: !enableScroll ? false : !!(scrollX || scrollY),
         bounces: false,
         ref: scrollViewRef,
-        onScroll: onScroll,
+        onScroll: enableSticky ? scrollHandler : onScroll,
         onContentSizeChange: onContentSizeChange,
         bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) && onScrollTouchStart,
         bindtouchmove: ((enhanced && binddragging) || bindtouchmove) && onScrollTouchMove,
@@ -523,13 +538,14 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         'bindscrolltolower',
         'bindrefresherrefresh'
     ], { layoutRef });
-    const withRefresherScrollView = createElement(GestureDetector, { gesture: panGesture }, createElement(ScrollView, 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 }), {
+    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(ScrollView, extendObject(innerProps, {
+    const commonScrollView = createElement(ScrollViewComponent, extendObject({}, innerProps, {
         refreshControl: refresherEnabled
             ? createElement(RefreshControl, extendObject({
                 progressBackgroundColor: refresherBackground,

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

@@ -0,0 +1,7 @@
+import { TextProps } from 'react-native';
+import { JSX } from 'react';
+declare const SimpleText: {
+    (props: TextProps): JSX.Element;
+    displayName: string;
+};
+export default SimpleText;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ViewProps } from 'react-native';
+declare const SimpleView: {
+    (simpleViewProps: ViewProps): JSX.Element;
+    displayName: string;
+};
+export default SimpleView;

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

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { View, NativeSyntheticEvent, ViewStyle } from 'react-native';
+import { HandlerRef } from './useNodesRef';
+interface StickyHeaderProps {
+    children?: ReactNode;
+    style?: ViewStyle;
+    padding?: [number, number, number, number];
+    'offset-top'?: number;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    bindstickontopchange?: (e: NativeSyntheticEvent<unknown>) => void;
+}
+declare const _StickyHeader: import("react").ForwardRefExoticComponent<StickyHeaderProps & import("react").RefAttributes<HandlerRef<View, StickyHeaderProps>>>;
+export default _StickyHeader;