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

package/lib/platform/template/wx/index.js

@@ -9,7 +9,7 @@ const { dash2hump } = require('../../../utils/hump-dash')
 
 module.exports = function getSpec ({ warn, error }) {
   const spec = {
-    supportedModes: ['ali', 'swan', 'qq', 'tt', 'web', 'qa', 'jd', 'dd', 'ios', 'android'],
+    supportedModes: ['ali', 'swan', 'qq', 'tt', 'web', 'qa', 'jd', 'dd', 'ios', 'android', 'harmony'],
     // props预处理
     preProps: [],
     // props后处理
@@ -347,18 +347,6 @@ module.exports = function getSpec ({ warn, error }) {
             value
           }
         },
-        // tt ({ name, value }, { eventRules }) {
-        //   const match = this.test.exec(name)
-        //   const prefix = match[1]
-        //   const eventName = match[2]
-        //   const modifierStr = match[3] || ''
-        //   const rEventName = runRules(eventRules, eventName, { mode: 'tt' })
-        //   return {
-        //     // 字节将所有事件转为小写
-        //     name: prefix + rEventName.toLowerCase() + modifierStr,
-        //     value
-        //   }
-        // },
         tt ({ name, value }, { eventRules }) {
           const match = this.test.exec(name)
           const prefix = match[1]
@@ -430,6 +418,21 @@ module.exports = function getSpec ({ warn, error }) {
             name: rPrefix + rEventName + meta.modifierStr,
             value
           }
+        },
+        harmony ({ name, value }, { eventRules, el }) {
+          const match = this.test.exec(name)
+          const prefix = match[1]
+          const eventName = match[2]
+          const modifierStr = match[3] || ''
+          const meta = {
+            modifierStr
+          }
+          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'harmony' })
+          const rEventName = runRules(eventRules, eventName, { mode: 'harmony', data: { el } })
+          return {
+            name: rPrefix + rEventName + meta.modifierStr,
+            value
+          }
         }
       },
       // 无障碍
@@ -565,6 +568,22 @@ module.exports = function getSpec ({ warn, error }) {
             } else {
               error(`React native environment does not support [${eventName}] event!`)
             }
+          },
+          harmony (eventName) {
+            const eventMap = {
+              tap: 'tap',
+              longtap: 'longpress',
+              longpress: 'longpress',
+              touchstart: 'touchstart',
+              touchmove: 'touchmove',
+              touchend: 'touchend',
+              touchcancel: 'touchcancel'
+            }
+            if (eventMap[eventName]) {
+              return eventMap[eventName]
+            } else {
+              error(`React native environment does not support [${eventName}] event!`)
+            }
           }
         },
         // web event escape

package/lib/react/index.js

@@ -85,7 +85,6 @@ module.exports = function ({
         srcMode,
         moduleId,
         isProduction,
-        componentGenerics,
         jsonConfig: jsonRes.jsonObj,
         outputPath: queryObj.outputPath || '',
         builtInComponentsMap: templateRes.builtInComponentsMap,

package/lib/react/processJSON.js

@@ -12,6 +12,7 @@ const createJSONHelper = require('../json-compiler/helper')
 const getRulesRunner = require('../platform/index')
 const { RESOLVE_IGNORED_ERR } = require('../utils/const')
 const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
+const RecordPageConfigsMapDependency = require('../dependencies/RecordPageConfigsMapDependency')
 
 module.exports = function (jsonContent, {
   loaderContext,
@@ -79,7 +80,6 @@ module.exports = function (jsonContent, {
     })
   }
 
-  const isApp = ctorType === 'app'
   if (!jsonContent) {
     return callback()
   }
@@ -99,7 +99,7 @@ module.exports = function (jsonContent, {
       }
     }
 
-    if (!isApp) {
+    if (ctorType !== 'app') {
       rulesRunnerOptions.mainKey = ctorType
     }
 
@@ -112,6 +112,17 @@ module.exports = function (jsonContent, {
     return callback(e)
   }
 
+  if (ctorType === 'page') {
+    const keysToExtract = ['navigationStyle']
+    const configObj = {}
+    keysToExtract.forEach(key => {
+      if (jsonObj[key]) {
+        configObj[key] = jsonObj[key]
+      }
+    })
+    loaderContext._module.addPresentationalDependency(new RecordPageConfigsMapDependency(parseRequest(loaderContext.resource).resourcePath, configObj))
+  }
+
   const fs = loaderContext._compiler.inputFileSystem
 
   const defaultTabbar = {

package/lib/react/processScript.js

@@ -12,7 +12,9 @@ module.exports = function (script, {
   outputPath,
   builtInComponentsMap,
   localComponentsMap,
-  localPagesMap
+  localPagesMap,
+  componentGenerics,
+  genericsInfo
 }, callback) {
   let scriptSrcMode = srcMode
   const mode = loaderContext.getMpx().mode
@@ -27,7 +29,7 @@ module.exports = function (script, {
     output += `
 import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
 import { NavigationContainer, StackActions } from '@react-navigation/native'
-${mode === 'ios' ? "import { createNativeStackNavigator as createStackNavigator } from '@react-navigation/native-stack'" : "import { createStackNavigator } from '@react-navigation/stack'"}
+${mode === 'ios' || mode === 'harmony' ? "import { createNativeStackNavigator as createStackNavigator } from '@react-navigation/native-stack'" : "import { createStackNavigator } from '@react-navigation/stack'"}
 import PortalHost from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal/portal-host'
 import { useHeaderHeight } from '@react-navigation/elements';
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
@@ -68,7 +70,7 @@ global.__navigationHelper = {
       jsonConfig
     })
 
-    output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap, outputPath })
+    output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap, outputPath, genericsInfo, componentGenerics })
     output += getRequireScript({ ctorType, script, loaderContext })
     output += `export default global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
   }

package/lib/react/processTemplate.js

@@ -5,6 +5,8 @@ const loaderUtils = require('loader-utils')
 const templateCompiler = require('../template-compiler/compiler')
 const genNode = require('../template-compiler/gen-node-react')
 const bindThis = require('../template-compiler/bind-this')
+const isEmptyObject = require('../utils/is-empty-object')
+const dash2hump = require('../utils/hump-dash').dash2hump
 
 module.exports = function (template, {
   loaderContext,
@@ -75,16 +77,15 @@ module.exports = function (template, {
         defs,
         decodeHTMLText,
         externalClasses,
-        // todo 后续输出web也采用mpx的scoped处理
         hasScoped: false,
         moduleId,
         filePath: rawResourcePath,
         // react中模版i18n不需要特殊处理
         i18n: null,
         checkUsingComponents,
-        // web模式下全局组件不会被合入usingComponents中，故globalComponents可以传空
+        // rn模式下全局组件不会被合入usingComponents中，故globalComponents可以传空
         globalComponents: [],
-        // web模式下实现抽象组件
+        // rn模式下实现抽象组件
         componentGenerics,
         hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules),
         forceProxyEvent: matchCondition(resourcePath, forceProxyEventRules),
@@ -148,6 +149,20 @@ ${e.stack}`)
       if (meta.options) {
         output += `global.currentInject.injectOptions = ${JSON.stringify(meta.options)};\n`
       }
+      if (!isEmptyObject(componentGenerics)) {
+        output += 'global.currentInject.injectProperties = {\n'
+        output += '  generichash: String,\n'
+
+        Object.keys(componentGenerics).forEach(genericName => {
+          const defaultValue = componentGenerics[genericName].default
+          if (defaultValue) {
+            output += `  generic${dash2hump(genericName)}: { type: String, value: '${genericName}default' },\n`
+          } else {
+             output += `  generic${dash2hump(genericName)}: String,\n`
+          }
+        })
+        output += '}\n'
+      }
     }
   }
 

package/lib/react/script-helper.js

@@ -89,7 +89,8 @@ function buildGlobalParams ({
   componentsMap,
   pagesMap,
   firstPage,
-  outputPath
+  outputPath,
+  genericsInfo
 }) {
   let content = ''
   if (ctorType === 'app') {
@@ -115,9 +116,22 @@ global.currentInject.firstPage = ${JSON.stringify(firstPage)}\n`
       delete pageConfig.usingComponents
       content += `global.currentInject.pageConfig = ${JSON.stringify(pageConfig)}\n`
     }
-    content += `global.currentInject.getComponents = function () {
-  return ${shallowStringify(componentsMap)}
-}\n`
+
+    content += `
+
+    function getComponents() {
+      return ${shallowStringify(componentsMap)}
+    }
+
+    global.currentInject.getComponents = getComponents\n`
+    if (genericsInfo) {
+      content += `
+        const genericHash = ${JSON.stringify(genericsInfo.hash)}\n
+        global.__mpxGenericsMap[genericHash] = function (name) {
+          return getComponents()[name]
+        }
+      \n`
+    }
     if (ctorType === 'component') {
       content += `global.currentInject.componentPath = '/' + ${JSON.stringify(outputPath)}\n`
     }

package/lib/runtime/components/react/dist/mpx-input.jsx

@@ -82,7 +82,7 @@ const Input = forwardRef((props, ref) => {
     const lineCount = useRef(0);
     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' }, style, multiline && autoHeight
         ? { height: 'auto', minHeight: Math.max(style?.minHeight || 35, contentHeight) }
         : {});
@@ -94,15 +94,17 @@ const Input = forwardRef((props, ref) => {
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     useEffect(() => {
         if (inputValue !== value) {
-            setInputValue(parseValue(value));
+            const parsed = parseValue(value);
+            tmpValue.current = parsed;
+            setInputValue(parsed);
         }
     }, [value]);
     useEffect(() => {
-        if (typeof cursor === 'number') {
-            setSelection({ start: cursor, end: cursor });
+        if (selectionStart > -1) {
+            setSelection({ start: selectionStart, end: selectionEnd === -1 ? tmpValue.current.length : selectionEnd });
         }
-        else if (selectionStart >= 0 && selectionEnd >= 0 && selectionStart !== selectionEnd) {
-            setSelection({ start: selectionStart, end: selectionEnd });
+        else if (typeof cursor === 'number') {
+            setSelection({ start: cursor, end: cursor });
         }
     }, [cursor, selectionStart, selectionEnd]);
     // have not selection on the Android platformg
@@ -152,6 +154,9 @@ const Input = forwardRef((props, ref) => {
         // sometimes the focus event occurs later than the keyboardWillShow event
         setKeyboardAvoidContext();
     };
+    const onTouchEnd = (evt) => {
+        evt.nativeEvent.origin = 'input';
+    };
     const onFocus = (evt) => {
         setKeyboardAvoidContext();
         bindfocus && bindfocus(getCustomEvent('focus', evt, {
@@ -170,15 +175,6 @@ const Input = forwardRef((props, ref) => {
             layoutRef
         }, props));
     };
-    const onKeyPress = (evt) => {
-        evt.nativeEvent.key === 'Enter' &&
-            bindconfirm(getCustomEvent('confirm', evt, {
-                detail: {
-                    value: tmpValue.current || ''
-                },
-                layoutRef
-            }, props));
-    };
     const onSubmitEditing = (evt) => {
         bindconfirm(getCustomEvent('confirm', evt, {
             detail: {
@@ -220,6 +216,7 @@ const Input = forwardRef((props, ref) => {
         }
     };
     const resetValue = () => {
+        tmpValue.current = '';
         setInputValue('');
     };
     const getValue = () => {
@@ -264,7 +261,7 @@ const Input = forwardRef((props, ref) => {
         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)',
@@ -273,13 +270,13 @@ const Input = forwardRef((props, ref) => {
         multiline: !!multiline
     }, !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }, layoutProps, {
         onTouchStart,
+        onTouchEnd,
         onFocus,
         onBlur,
         onChange,
         onSelectionChange,
         onContentSizeChange,
-        onKeyPress: bindconfirm && onKeyPress,
-        onSubmitEditing: bindconfirm && multiline && onSubmitEditing
+        onSubmitEditing: bindconfirm && !multiline && onSubmitEditing
     }), [
         'type',
         'password',

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

@@ -1,7 +1,6 @@
-import React, { useContext, useEffect, useMemo } from 'react';
-import { Keyboard, Platform, View } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, runOnJS } from 'react-native-reanimated';
-import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+import React, { useContext, useEffect } from 'react';
+import { Keyboard, View, Platform } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
 import { KeyboardAvoidContext } from './context';
 const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
     const isIOS = Platform.OS === 'ios';
@@ -10,20 +9,10 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
     const offset = useSharedValue(0);
     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 });
-    });
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: -offset.value }],
+        flexBasis: basic.value
+    }));
     const resetKeyboard = () => {
         if (keyboardAvoid?.current) {
             keyboardAvoid.current = null;
@@ -31,6 +20,11 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
         offset.value = withTiming(0, { duration, easing });
         basic.value = 'auto';
     };
+    const onTouchEnd = ({ nativeEvent }) => {
+        if (nativeEvent.origin !== 'input') {
+            Keyboard.isVisible() && Keyboard.dismiss();
+        }
+    };
     useEffect(() => {
         let subscriptions = [];
         if (isIOS) {
@@ -46,7 +40,12 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
                             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%';
+                                }
+                            });
                         });
                     });
                 }),
@@ -68,11 +67,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
                         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%';
                             }
                         });
@@ -85,15 +80,14 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
             subscriptions.forEach(subscription => subscription.remove());
         };
     }, [keyboardAvoid]);
-    return (<GestureDetector gesture={gesture}>
-      <View style={style}>
-        <Animated.View style={[
+    return (<View style={style} onTouchEnd={onTouchEnd}>
+      <Animated.View style={[
             contentContainerStyle,
             animatedStyle
         ]}>
-          {children}
-        </Animated.View>
-      </View>
-    </GestureDetector>);
+        {children}
+      </Animated.View>
+    </View>);
 };
+KeyboardAvoidingView.displayName = 'MpxKeyboardAvoidingView';
 export default KeyboardAvoidingView;

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

@@ -1,7 +1,7 @@
 import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Reanimated, { 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 from './useNodesRef';
 import PickerIndicator from './pickerViewIndicator';
 import PickerMask from './pickerViewMask';
@@ -81,7 +81,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
                 y: initialIndex * itemRawH,
                 animated: false
             });
-        }, isAndroid ? 200 : 0);
+        }, isAndroid || isHarmony ? 200 : 0);
         activeIndex.current = initialIndex;
     }, [itemRawH, maxIndex, initialIndex]);
     const onContentSizeChange = useCallback((_w, h) => {

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

@@ -1,6 +1,5 @@
 import { useState, useCallback, forwardRef, useImperativeHandle } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { extendObject } from '../utils';
 const _PortalManager = forwardRef((props, ref) => {
     const [state, setState] = useState({
         portals: []
@@ -14,7 +13,7 @@ const _PortalManager = forwardRef((props, ref) => {
         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/dist/mpx-scroll-view.jsx

@@ -41,7 +41,7 @@ import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, ext
 import { IntersectionObserverContext, ScrollViewContext } from './context';
 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, '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, __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, '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 simultaneousHandlers = flatGesture(originSimultaneousHandlers);
     const waitForHandlers = flatGesture(waitFor);
     const [refreshing, setRefreshing] = useState(true);
@@ -54,7 +54,6 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         scrollTop: 0,
         visibleLength: 0
     });
-    const scrollEventThrottle = 50;
     const hasCallScrollToUpper = useRef(true);
     const hasCallScrollToLower = useRef(false);
     const initialTimeout = useRef(null);
@@ -83,6 +82,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         };
     }, []);
     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');
     }
@@ -133,7 +133,8 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     function onStartReached(e) {
         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, {
                     detail: {
@@ -152,12 +153,13 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         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));
@@ -206,6 +208,8 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         onStartReached(e);
         onEndReached(e);
         updateIntersection();
+        // 在 onStartReached、onEndReached 执行完后更新 lastOffset
+        lastOffset.current = scrollOptions.current.offset;
     }
     function onScrollEnd(e) {
         const { bindscrollend } = props;
@@ -225,6 +229,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         onStartReached(e);
         onEndReached(e);
         updateIntersection();
+        lastOffset.current = scrollOptions.current.offset;
     }
     function updateIntersection() {
         if (enableTriggerIntersectionObserver && intersectionObservers) {

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

@@ -0,0 +1,22 @@
+import { View } from 'react-native';
+import { createElement, forwardRef, useRef } from 'react';
+import useNodesRef from './useNodesRef';
+import { extendObject, splitProps, splitStyle, wrapChildren } from './utils';
+const _View2 = forwardRef((simpleViewProps, ref) => {
+    const nodeRef = useRef(null);
+    const { textProps, innerProps: props = {} } = splitProps(simpleViewProps);
+    const { textStyle, innerStyle = {} } = splitStyle(props.style || {});
+    useNodesRef(props, ref, nodeRef, {
+        style: innerStyle || {}
+    });
+    return createElement(View, extendObject({}, props, {
+        style: innerStyle,
+        ref: nodeRef
+    }), wrapChildren(props, {
+        hasVarDec: false,
+        textStyle: textStyle,
+        textProps
+    }));
+});
+_View2.displayName = 'MpxSimpleView';
+export default _View2;

package/lib/runtime/components/react/dist/mpx-swiper-item.jsx

@@ -2,7 +2,7 @@ import Animated, { useAnimatedStyle, interpolate } from 'react-native-reanimated
 import { forwardRef, useRef, useContext } from 'react';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils';
+import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, isHarmony } from './utils';
 import { SwiperContext } from './context';
 const _SwiperItem = forwardRef((props, ref) => {
     const { 'enable-var': enableVar, 'external-var-context': externalVarContext, style, customStyle, itemIndex } = props;
@@ -30,7 +30,7 @@ const _SwiperItem = forwardRef((props, ref) => {
         'style'
     ], { layoutRef });
     const itemAnimatedStyle = useAnimatedStyle(() => {
-        if (!step.value)
+        if (!step.value && !isHarmony)
             return {};
         const inputRange = [step.value, 0];
         const outputRange = [0.7, 1];

package/lib/runtime/components/react/dist/mpx-swiper.jsx

@@ -70,7 +70,7 @@ const easeMap = {
     easeInOutCubic: Easing.inOut(Easing.cubic)
 };
 const SwiperWrapper = forwardRef((props, ref) => {
-    const { 'indicator-dots': showsPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, style = {}, autoplay = false, circular = false } = props;
+    const { 'indicator-dots': showsPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, style = {}, autoplay = false, circular = false, disableGesture = false } = props;
     const easeingFunc = props['easing-function'] || 'default';
     const easeDuration = props.duration || 500;
     const horizontal = props.vertical !== undefined ? !props.vertical : true;
@@ -658,7 +658,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         {showsPagination && renderPagination()}
     </View>);
     }
-    if (children.length === 1) {
+    if (children.length === 1 || disableGesture) {
         return renderSwiper();
     }
     else {

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

@@ -14,6 +14,7 @@ import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wra
 import { error } from '@mpxjs/utils';
 import LinearGradient from 'react-native-linear-gradient';
 import { GestureDetector } from 'react-native-gesture-handler';
+import Portal from './mpx-portal';
 const linearMap = new Map([
     ['top', 0],
     ['bottom', 180],
@@ -555,7 +556,7 @@ const _View = forwardRef((viewProps, ref) => {
     const enableHover = !!hoverStyle;
     const { isHover, gesture } = useHover({ enableHover, hoverStartTime, hoverStayTime });
     const styleObj = extendObject({}, defaultStyle, style, isHover ? hoverStyle : {});
-    const { normalStyle, hasSelfPercent, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, {
+    const { normalStyle, hasSelfPercent, hasPositionFixed, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, {
         enableVar,
         externalVarContext,
         parentFontSize,
@@ -600,12 +601,16 @@ const _View = forwardRef((viewProps, ref) => {
         innerStyle,
         enableFastImage
     });
-    const BaseComponent = enableStyleAnimation
+    let finalComponent = enableStyleAnimation
         ? createElement(Animated.View, innerProps, childNode)
         : createElement(View, innerProps, childNode);
-    return enableHover
-        ? createElement(GestureDetector, { gesture: gesture }, BaseComponent)
-        : BaseComponent;
+    if (enableHover) {
+        finalComponent = createElement(GestureDetector, { gesture: gesture }, finalComponent);
+    }
+    if (hasPositionFixed) {
+        finalComponent = createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 _View.displayName = 'MpxView';
 export default _View;