@mpxjs/webpack-plugin 2.10.2 → 2.10.3-beta.10

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

@@ -45,7 +45,7 @@ const _WebView = forwardRef((props, ref) => {
             button: 'Reload'
         }
     };
-    const currentErrorText = errorText[mpx.i18n.locale || 'zh-CN'];
+    const currentErrorText = errorText[mpx.i18n?.locale || 'zh-CN'];
     if (props.style) {
         warn('The web-view component does not support the style prop.');
     }
@@ -75,7 +75,10 @@ const _WebView = forwardRef((props, ref) => {
     };
     const navigation = useNavigation();
     useEffect(() => {
-        const beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle);
+        let beforeRemoveSubscription;
+        if (__mpx_mode__ !== 'ios') {
+            beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle);
+        }
         return () => {
             if (isFunction(beforeRemoveSubscription)) {
                 beforeRemoveSubscription();
@@ -89,7 +92,7 @@ const _WebView = forwardRef((props, ref) => {
         return null;
     }
     const _reload = function () {
-        if (__mpx_mode__ === 'android') {
+        if (__mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') {
             fristLoaded.current = false; // 安卓需要重新设置
         }
         setPageLoadErr(false);
@@ -133,7 +136,7 @@ const _WebView = forwardRef((props, ref) => {
         }
     };
     const _onLoadProgress = function (event) {
-        if (__mpx_mode__ === 'android') {
+        if (__mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') {
             canGoBack.current = event.nativeEvent.canGoBack;
         }
     };
@@ -251,8 +254,8 @@ const _WebView = forwardRef((props, ref) => {
         }
     };
     const onLoadEnd = function (res) {
-        if (__mpx_mode__ === 'android') {
-            res.persist();
+        res.persist();
+        if (__mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') {
             setTimeout(() => {
                 onLoadEndHandle(res);
             }, 0);
@@ -277,7 +280,7 @@ const _WebView = forwardRef((props, ref) => {
             setIsLoaded(false);
         }
     };
-    return (<Portal key={pageLoadErr ? 'error' : 'webview'}>
+    return (<Portal>
         {pageLoadErr
             ? (<View style={[styles.loadErrorContext, defaultWebViewStyle]}>
               <View style={styles.loadErrorText}><Text style={{ fontSize: 14, color: '#999999' }}>{currentErrorText.text}</Text></View>

package/lib/runtime/components/react/dist/useAnimationHooks.js

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef } from 'react';
 import { Easing, useSharedValue, withTiming, useAnimatedStyle, withSequence, withDelay, makeMutable, cancelAnimation } from 'react-native-reanimated';
-import { error } from '@mpxjs/utils';
+import { error, hasOwn } from '@mpxjs/utils';
 // 微信 timingFunction 和 RN Easing 对应关系
 const EasingKey = {
     linear: Easing.linear,
@@ -14,20 +14,20 @@ const EasingKey = {
 const TransformInitial = {
     // matrix: 0,
     // matrix3d: 0,
-    rotate: '0deg',
+    // rotate: '0deg',
     rotateX: '0deg',
     rotateY: '0deg',
     rotateZ: '0deg',
     // rotate3d:[0,0,0]
-    scale: 1,
+    // scale: 1,
     // scale3d: [1, 1, 1],
     scaleX: 1,
     scaleY: 1,
     // scaleZ: 1,
-    skew: 0,
+    // skew: 0,
     skewX: '0deg',
     skewY: '0deg',
-    translate: 0,
+    // translate: 0,
     // translate3d: 0,
     translateX: 0,
     translateY: 0
@@ -92,23 +92,23 @@ const parseTransform = (transformStr) => {
                 case 'skewX':
                 case 'skewY':
                 case 'perspective':
+                    // rotate 处理成 rotateZ
+                    key = key === 'rotate' ? 'rotateZ' : key;
                     // 单个值处理
                     transform.push({ [key]: global.__formatValue(val) });
                     break;
                 case 'matrix':
-                case 'matrix3d':
                     transform.push({ [key]: parseValues(val, ',').map(val => +val) });
                     break;
                 case 'translate':
                 case 'scale':
                 case 'skew':
-                case 'rotate3d': // x y z angle
                 case 'translate3d': // x y 支持 z不支持
                 case 'scale3d': // x y 支持 z不支持
                     {
                         // 2 个以上的值处理
                         key = key.replace('3d', '');
-                        const vals = parseValues(val, ',').splice(0, key === 'rotate' ? 4 : 3);
+                        const vals = parseValues(val, ',').splice(0, 3);
                         // scale(.5) === scaleX(.5) scaleY(.5)
                         if (vals.length === 1 && key === 'scale') {
                             vals.push(vals[0]);
@@ -132,6 +132,13 @@ const formatStyle = (style) => {
         transform: parseTransform(style.transform)
     });
 };
+// transform 数组转对象
+function getTransformObj(transforms) {
+    'worklet';
+    return transforms.reduce((transformObj, item) => {
+        return Object.assign(transformObj, item);
+    }, {});
+}
 export default function useAnimationHooks(props) {
     const { style = {}, animation, enableAnimation } = props;
     const enableStyleAnimation = enableAnimation || !!animation;
@@ -150,7 +157,9 @@ export default function useAnimationHooks(props) {
     // 记录动画key的style样式值 没有的话设置为false
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const animatedKeys = useRef({});
-    // const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: boolean|number|string})
+    // 记录上次style map
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const lastStyleRef = useRef({});
     // ** 全量 style prop sharedValue
     // 不能做增量的原因：
     // 1 尝试用 useRef，但 useAnimatedStyle 访问后的 ref 不能在增加新的值，被冻结
@@ -163,6 +172,12 @@ export default function useAnimationHooks(props) {
             return valMap;
         }, {});
     }, []);
+    // ** style更新同步
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+        // style 更新后同步更新 lastStyleRef & shareValMap
+        updateStyleVal();
+    }, [style]);
     // ** 获取动画样式prop & 驱动动画
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
@@ -175,16 +190,6 @@ export default function useAnimationHooks(props) {
         // 驱动动画
         createAnimation(keys);
     }, [id]);
-    // 同步style更新
-    // useEffect(() => {
-    //   Object.keys(animatedKeys.current).forEach(key => {
-    //     const originVal = getOriginalStyleVal(key, isTransform(key))
-    //     if (originVal && animatedKeys.current[key] !== originVal) {
-    //       animatedKeys.current[key] = originVal
-    //       shareValMap[key].value = originVal
-    //     }
-    //   })
-    // }, [style])
     // ** 清空动画
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
@@ -194,7 +199,7 @@ export default function useAnimationHooks(props) {
             });
         };
     }, []);
-    // 根据 animation action 创建&驱动动画 key => wi
+    // 根据 animation action 创建&驱动动画
     function createAnimation(animatedKeys = []) {
         const actions = animation?.actions || [];
         const sequence = {};
@@ -251,6 +256,7 @@ export default function useAnimationHooks(props) {
             : withTiming(value, { duration, easing });
         return delay ? withDelay(delay, animation) : animation;
     }
+    // 获取样式初始值（prop style or 默认值）
     function getInitialVal(key, isTransform = false) {
         if (isTransform && Array.isArray(originalStyle.transform)) {
             let initialVal = InitialValue[key];
@@ -263,31 +269,12 @@ export default function useAnimationHooks(props) {
         }
         return originalStyle[key] === undefined ? InitialValue[key] : originalStyle[key];
     }
-    // 从 prop style 中获取样式初始值 没有为undefined
-    // function getOriginalStyleVal (key: keyof ExtendedViewStyle, isTransform = false) {
-    //   if (isTransform && Array.isArray(originalStyle.transform)) {
-    //     let initialVal = undefined // InitialValue[key]
-    //     // 仅支持 { transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}] } 格式的初始样式
-    //     originalStyle.transform.forEach(item => {
-    //       if (item[key] !== undefined) initialVal = item[key]
-    //     })
-    //     return initialVal
-    //   }
-    //   return originalStyle[key] // === undefined ? InitialValue[key] : originalStyle[key]
-    // }
-    // 获取动画shareVal初始值（prop style or 默认值）
-    // function getInitialVal (key: keyof ExtendedViewStyle, isTransform = false) {
-    //   const originalVal = getOriginalStyleVal(key, isTransform)
-    //   return originalVal === undefined ? InitialValue[key] : originalStyle[key]
-    // }
     // 循环 animation actions 获取所有有动画的 style prop name
     function getAnimatedStyleKeys() {
         return (animation?.actions || []).reduce((keyMap, action) => {
             const { rules, transform } = action;
             const ruleArr = [...rules.keys(), ...transform.keys()];
             ruleArr.forEach(key => {
-                // const originalVal = getOriginalStyleVal(key, isTransform(key))
-                // if (!keyMap[key]) keyMap[key] = originalVal === undefined ? false : originalVal
                 if (!keyMap[key])
                     keyMap[key] = true;
             });
@@ -295,7 +282,7 @@ export default function useAnimationHooks(props) {
         }, animatedKeys.current);
     }
     // animated key transform 格式化
-    function formatAnimatedKeys(keys = []) {
+    function formatAnimatedKeys(keys) {
         const animatedKeys = [];
         const transforms = [];
         keys.forEach(key => {
@@ -310,13 +297,24 @@ export default function useAnimationHooks(props) {
             animatedKeys.push(transforms);
         return animatedKeys;
     }
-    // transform 数组转对象
-    function getTransformObj() {
-        'worklet';
-        const transforms = originalStyle.transform || [];
-        return transforms.reduce((transformObj, item) => {
-            return Object.assign(transformObj, item);
-        }, {});
+    // 设置 lastShareValRef & shareValMap
+    function updateStyleVal() {
+        Object.entries(originalStyle).forEach(([key, value]) => {
+            if (key === 'transform') {
+                Object.entries(getTransformObj(value)).forEach(([key, value]) => {
+                    if (value !== lastStyleRef.current[key]) {
+                        lastStyleRef.current[key] = value;
+                        shareValMap[key].value = value;
+                    }
+                });
+            }
+            else if (hasOwn(shareValMap, key)) {
+                if (value !== lastStyleRef.current[key]) {
+                    lastStyleRef.current[key] = value;
+                    shareValMap[key].value = value;
+                }
+            }
+        });
     }
     // ** 生成动画样式
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -325,7 +323,7 @@ export default function useAnimationHooks(props) {
         return animatedStyleKeys.value.reduce((styles, key) => {
             // console.info('getAnimationStyles', key, shareValMap[key].value)
             if (Array.isArray(key)) {
-                const transformStyle = getTransformObj();
+                const transformStyle = getTransformObj(originalStyle.transform || []);
                 key.forEach((transformKey) => {
                     transformStyle[transformKey] = shareValMap[transformKey].value;
                 });

package/lib/runtime/components/react/dist/utils.jsx

@@ -19,6 +19,7 @@ export const HIDDEN_STYLE = {
 };
 export const isIOS = __mpx_mode__ === 'ios';
 export const isAndroid = __mpx_mode__ === 'android';
+export const isHarmony = __mpx_mode__ === 'harmony';
 const varDecRegExp = /^--/;
 const varUseRegExp = /var\(/;
 const unoVarDecRegExp = /^--un-/;
@@ -239,12 +240,8 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
     const normalStyleChangedRef = useRef(false);
     let hasVarDec = false;
     let hasVarUse = false;
-    let hasSelfPercent = false;
     const varKeyPaths = [];
     const unoVarKeyPaths = [];
-    const percentKeyPaths = [];
-    const calcKeyPaths = [];
-    const envKeyPaths = [];
     const [width, setWidth] = useState(0);
     const [height, setHeight] = useState(0);
     const navigation = useNavigation();
@@ -304,6 +301,11 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
         normalStyleChangedRef.current = !normalStyleChangedRef.current;
     }
     const memoResult = useMemo(() => {
+        let hasSelfPercent = false;
+        let hasPositionFixed = false;
+        const percentKeyPaths = [];
+        const calcKeyPaths = [];
+        const envKeyPaths = [];
         // transform can be memoized
         function envVisitor({ value, keyPath }) {
             if (envUseRegExp.test(value)) {
@@ -324,6 +326,12 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
                 percentKeyPaths.push(keyPath.slice());
             }
         }
+        function transformPosition(styleObj) {
+            if (styleObj.position === 'fixed') {
+                hasPositionFixed = true;
+                styleObj.position = 'absolute';
+            }
+        }
         // traverse env & calc & percent
         traverseStyle(normalStyle, [envVisitor, percentVisitor, calcVisitor]);
         const percentConfig = {
@@ -355,11 +363,14 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
                 }
             }
         });
+        // apply position
+        transformPosition(normalStyle);
         // transform number enum stringify
         transformStringify(normalStyle);
         return {
             normalStyle,
-            hasSelfPercent
+            hasSelfPercent,
+            hasPositionFixed
         };
     }, [normalStyleChangedRef.current, width, height, parentWidth, parentHeight, parentFontSize]);
     return extendObject({
@@ -434,8 +445,8 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout
             hasLayoutRef.current = true;
             if (hasSelfPercent) {
                 const { width, height } = e?.nativeEvent?.layout || {};
-                setWidth(width || 0);
-                setHeight(height || 0);
+                setWidth && setWidth(width || 0);
+                setHeight && setHeight(height || 0);
             }
             if (enableOffset) {
                 nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {

package/lib/runtime/components/react/mpx-input.tsx

@@ -51,7 +51,8 @@ import {
   TextInputSelectionChangeEventData,
   TextInputFocusEventData,
   TextInputChangeEventData,
-  TextInputSubmitEditingEventData
+  TextInputSubmitEditingEventData,
+  NativeTouchEvent
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
 import { useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils'
@@ -195,7 +196,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
 
   const [inputValue, setInputValue] = useState(defaultValue)
   const [contentHeight, setContentHeight] = useState(0)
-  const [selection, setSelection] = useState({ start: -1, end: -1 })
+  const [selection, setSelection] = useState({ start: -1, end: tmpValue.current.length })
 
   const styleObj = extendObject(
     { padding: 0, backgroundColor: '#fff' },
@@ -221,15 +222,17 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
 
   useEffect(() => {
     if (inputValue !== value) {
-      setInputValue(parseValue(value))
+      const parsed = parseValue(value)
+      tmpValue.current = parsed
+      setInputValue(parsed)
     }
   }, [value])
 
   useEffect(() => {
-    if (typeof cursor === 'number') {
+    if (selectionStart > -1) {
+      setSelection({ start: selectionStart, end: selectionEnd === -1 ? tmpValue.current.length : selectionEnd })
+    } else if (typeof cursor === 'number') {
       setSelection({ start: cursor, end: cursor })
-    } else if (selectionStart >= 0 && selectionEnd >= 0 && selectionStart !== selectionEnd) {
-      setSelection({ start: selectionStart, end: selectionEnd })
     }
   }, [cursor, selectionStart, selectionEnd])
 
@@ -290,6 +293,10 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     setKeyboardAvoidContext()
   }
 
+  const onTouchEnd = (evt: NativeSyntheticEvent<NativeTouchEvent & { origin?: string }>) => {
+    evt.nativeEvent.origin = 'input'
+  }
+
   const onFocus = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
     setKeyboardAvoidContext()
     bindfocus && bindfocus(
@@ -324,23 +331,6 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     )
   }
 
-  const onKeyPress = (evt: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
-    evt.nativeEvent.key === 'Enter' &&
-      bindconfirm!(
-        getCustomEvent(
-          'confirm',
-          evt,
-          {
-            detail: {
-              value: tmpValue.current || ''
-            },
-            layoutRef
-          },
-          props
-        )
-      )
-  }
-
   const onSubmitEditing = (evt: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => {
     bindconfirm!(
       getCustomEvent(
@@ -405,6 +395,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }
 
   const resetValue = () => {
+    tmpValue.current = ''
     setInputValue('')
   }
 
@@ -457,7 +448,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         maxLength: maxlength === -1 ? undefined : maxlength,
         editable: !disabled,
         autoFocus: !!autoFocus || !!focus,
-        selection: selection,
+        selection: selectionStart > -1 || typeof cursor === 'number' ? selection : undefined,
         selectionColor: cursorColor,
         blurOnSubmit: !multiline && !confirmHold,
         underlineColorAndroid: 'rgba(0,0,0,0)',
@@ -469,13 +460,13 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
       layoutProps,
       {
         onTouchStart,
+        onTouchEnd,
         onFocus,
         onBlur,
         onChange,
         onSelectionChange,
         onContentSizeChange,
-        onKeyPress: bindconfirm && onKeyPress,
-        onSubmitEditing: bindconfirm && multiline && onSubmitEditing
+        onSubmitEditing: bindconfirm && !multiline && onSubmitEditing
       }
     ),
     [

package/lib/runtime/components/react/{KeyboardAvoidingView.tsx → mpx-keyboard-avoiding-view.tsx}

@@ -1,7 +1,6 @@
-import React, { ReactNode, useContext, useEffect, useMemo } from 'react'
-import { DimensionValue, EmitterSubscription, Keyboard, Platform, View, ViewStyle } from 'react-native'
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, runOnJS } from 'react-native-reanimated'
-import { GestureDetector, Gesture } from 'react-native-gesture-handler'
+import React, { ReactNode, useContext, useEffect } from 'react'
+import { DimensionValue, EmitterSubscription, Keyboard, View, ViewStyle, Platform, NativeSyntheticEvent, NativeTouchEvent } from 'react-native'
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated'
 import { KeyboardAvoidContext } from './context'
 
 type KeyboardAvoidViewProps = {
@@ -19,25 +18,10 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   const basic = useSharedValue('auto')
   const keyboardAvoid = useContext(KeyboardAvoidContext)
 
-  const dismiss = () => {
-    Keyboard.isVisible() && Keyboard.dismiss()
-  }
-
-  const gesture = useMemo(() => {
-    return Gesture.Tap()
-      .onEnd(() => {
-        runOnJS(dismiss)()
-      })
-  }, [])
-
-  const animatedStyle = useAnimatedStyle(() => {
-    return Object.assign(
-      {
-        transform: [{ translateY: -offset.value }]
-      },
-      isIOS ? {} : { flexBasis: basic.value as DimensionValue }
-    )
-  })
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: -offset.value }],
+    flexBasis: basic.value as DimensionValue
+  }))
 
   const resetKeyboard = () => {
     if (keyboardAvoid?.current) {
@@ -47,6 +31,12 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
     basic.value = 'auto'
   }
 
+  const onTouchEnd = ({ nativeEvent }: NativeSyntheticEvent<NativeTouchEvent & { origin?: string }>) => {
+    if (nativeEvent.origin !== 'input') {
+      Keyboard.isVisible() && Keyboard.dismiss()
+    }
+  }
+
   useEffect(() => {
     let subscriptions: EmitterSubscription[] = []
 
@@ -62,7 +52,12 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
               const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing
               const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing)
               const value = aboveOffset > 0 ? belowValue : aboveValue
-              offset.value = withTiming(value, { duration, easing })
+              offset.value = withTiming(value, { duration, easing }, (finished) => {
+                if (finished) {
+                  // Set flexBasic after animation to trigger re-layout and reset layout information
+                  basic.value = '99.99%'
+                }
+              })
             })
           })
         }),
@@ -82,11 +77,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
             const value = aboveOffset > 0 ? belowValue : aboveValue
             offset.value = withTiming(value, { duration, easing }, (finished) => {
               if (finished) {
-                /**
-                 * In the Android environment, the layout information is not synchronized after the animation,
-                 * which results in the inability to correctly trigger element events.
-                 * Here, we utilize flexBasic to proactively trigger a re-layout
-                 */
+                // Set flexBasic after animation to trigger re-layout and reset layout information
                 basic.value = '99.99%'
               }
             })
@@ -102,19 +93,19 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   }, [keyboardAvoid])
 
   return (
-    <GestureDetector gesture={gesture}>
-      <View style={style}>
-        <Animated.View
-          style={[
-            contentContainerStyle,
-            animatedStyle
-          ]}
-        >
-          {children}
-        </Animated.View>
-      </View>
-    </GestureDetector>
+    <View style={style} onTouchEnd={onTouchEnd}>
+      <Animated.View
+        style={[
+          contentContainerStyle,
+          animatedStyle
+        ]}
+      >
+        {children}
+      </Animated.View>
+    </View>
   )
 }
 
+KeyboardAvoidingView.displayName = 'MpxKeyboardAvoidingView'
+
 export default KeyboardAvoidingView

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

@@ -1,7 +1,7 @@
 import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react'
 import { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, ScrollView, StyleSheet, View } from 'react-native'
 import Reanimated, { AnimatedRef, useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated'
-import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS } from './utils'
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS, isHarmony } from './utils'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import PickerIndicator from './pickerViewIndicator'
 import PickerMask from './pickerViewMask'
@@ -140,7 +140,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
         y: initialIndex * itemRawH,
         animated: false
       })
-    }, isAndroid ? 200 : 0)
+    }, isAndroid || isHarmony ? 200 : 0)
     activeIndex.current = initialIndex
   }, [itemRawH, maxIndex, initialIndex])
 

package/lib/runtime/components/react/mpx-portal/portal-manager.tsx

@@ -1,6 +1,5 @@
 import { useState, useCallback, forwardRef, ForwardedRef, useImperativeHandle, ReactNode, ReactElement } from 'react'
 import { View, StyleSheet } from 'react-native'
-import { extendObject } from '../utils'
 
 export type State = {
   portals: Array<{
@@ -27,7 +26,7 @@ const _PortalManager = forwardRef((props: PortalManagerProps, ref:ForwardedRef<u
     setState((prevState) => ({
       portals: prevState.portals.map((item) => {
         if (item.key === key) {
-          return extendObject({}, item, { children })
+          return Object.assign({}, item, { children })
         }
         return item
       })

package/lib/runtime/components/react/mpx-scroll-view.tsx

@@ -70,6 +70,7 @@ interface ScrollViewProps {
   'parent-height'?: number;
   'wait-for'?: Array<GestureHandler>;
   'simultaneous-handlers'?: Array<GestureHandler>;
+  'scroll-event-throttle'?:number;
   bindscrolltoupper?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
   bindscrolltolower?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
   bindscroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
@@ -140,6 +141,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     'parent-height': parentHeight,
     'simultaneous-handlers': originSimultaneousHandlers,
     'wait-for': waitFor,
+    'scroll-event-throttle': scrollEventThrottle = 0,
     __selectRef
   } = props
 
@@ -159,7 +161,6 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     visibleLength: 0
   })
 
-  const scrollEventThrottle = 50
   const hasCallScrollToUpper = useRef(true)
   const hasCallScrollToLower = useRef(false)
   const initialTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)
@@ -202,6 +203,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout })
 
+  const lastOffset = useRef(0)
+
   if (scrollX && scrollY) {
     warn('scroll-x and scroll-y cannot be set to true at the same time, Mpx will use the value of scroll-y as the criterion')
   }
@@ -263,7 +266,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   function onStartReached (e: NativeSyntheticEvent<NativeScrollEvent>) {
     const { bindscrolltoupper } = props
     const { offset } = scrollOptions.current
-    if (bindscrolltoupper && (offset <= upperThreshold)) {
+    const isScrollingBackward = offset < lastOffset.current
+    if (bindscrolltoupper && (offset <= upperThreshold) && isScrollingBackward) {
       if (!hasCallScrollToUpper.current) {
         bindscrolltoupper(
           getCustomEvent('scrolltoupper', e, {
@@ -284,13 +288,15 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     const { bindscrolltolower } = props
     const { contentLength, visibleLength, offset } = scrollOptions.current
     const distanceFromEnd = contentLength - visibleLength - offset
-    if (bindscrolltolower && (distanceFromEnd < lowerThreshold)) {
+    const isScrollingForward = offset > lastOffset.current
+
+    if (bindscrolltolower && (distanceFromEnd < lowerThreshold) && isScrollingForward) {
       if (!hasCallScrollToLower.current) {
         hasCallScrollToLower.current = true
         bindscrolltolower(
           getCustomEvent('scrolltolower', e, {
             detail: {
-              direction: scrollX ? 'right' : 'botttom'
+              direction: scrollX ? 'right' : 'bottom'
             },
             layoutRef
           }, props)
@@ -345,6 +351,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     onStartReached(e)
     onEndReached(e)
     updateIntersection()
+    // 在 onStartReached、onEndReached 执行完后更新 lastOffset
+    lastOffset.current = scrollOptions.current.offset
   }
 
   function onScrollEnd (e: NativeSyntheticEvent<NativeScrollEvent>) {
@@ -367,6 +375,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     onStartReached(e)
     onEndReached(e)
     updateIntersection()
+    lastOffset.current = scrollOptions.current.offset
   }
   function updateIntersection () {
     if (enableTriggerIntersectionObserver && intersectionObservers) {