@mpxjs/webpack-plugin 2.9.73 → 2.10.1

package/lib/file-loader.js

@@ -7,6 +7,8 @@ const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDep
 module.exports = function loader (content, prevOptions) {
   const options = prevOptions || loaderUtils.getOptions(this) || {}
   const context = options.context || this.rootContext
+  const mpx = this.getMpx()
+  const isRN = ['ios', 'android', 'harmony'].includes(mpx.mode)
 
   let url = loaderUtils.interpolateName(this, options.name, {
     context,
@@ -33,6 +35,9 @@ module.exports = function loader (content, prevOptions) {
 
   let publicPath = `__webpack_public_path__ + ${JSON.stringify(url)}`
 
+  // todo 未来添加分包处理后相对地址不一定是./开头的，需要考虑通过dependency的方式在sourceModule时通过最终的chunkName得到准确的相对路径
+  if (isRN) publicPath = `__non_webpack_require__(${JSON.stringify(`./${url}`)})`
+
   if (options.publicPath) {
     if (typeof options.publicPath === 'function') {
       publicPath = options.publicPath(url, this.resourcePath, context)

package/lib/index.js

@@ -54,6 +54,7 @@ const wxssLoaderPath = normalize.lib('wxss/index')
 const wxmlLoaderPath = normalize.lib('wxml/loader')
 const wxsLoaderPath = normalize.lib('wxs/loader')
 const styleCompilerPath = normalize.lib('style-compiler/index')
+const styleStripConditionalPath = normalize.lib('style-compiler/strip-conditional-loader')
 const templateCompilerPath = normalize.lib('template-compiler/index')
 const jsonCompilerPath = normalize.lib('json-compiler/index')
 const jsonThemeCompilerPath = normalize.lib('json-compiler/theme')
@@ -1506,12 +1507,12 @@ class MpxWebpackPlugin {
                 '  code = code.replace(/const { (.*?) } = ctx/g, function (match, $1) {\n' +
                 '    var arr = $1.split(", ")\n' +
                 '    var str = ""\n' +
-                '    var pattern = /(.*):(.*)/\n' +
+                '    var pattern = /(\\w+)(?::\\s*(\\w+))?/\n' +
                 '    for (var i = 0; i < arr.length; i++) {\n' +
                 '      var result = arr[i].match(pattern)\n' +
                 '      var left = result[1]\n' +
-                '      var right = result[2]\n' +
-                '      str += "var" + right + " = ctx." + left\n' +
+                '      var right = result[2] || left\n' +
+                '      str += "var " + right + " = ctx." + left + ";\\n  "\n' +
                 '    }\n' +
                 '    return str\n' +
                 '  })\n' +
@@ -1786,6 +1787,23 @@ try {
         if (queryObj.mpx && queryObj.mpx !== MPX_PROCESSED_FLAG) {
           const type = queryObj.type
           const extract = queryObj.extract
+
+          if (type === 'styles') {
+            let insertBeforeIndex = -1
+            // 单次遍历收集所有索引
+            loaders.forEach((loader, index) => {
+              const currentLoader = toPosix(loader.loader)
+              if (currentLoader.includes('node_modules/stylus-loader') || currentLoader.includes('node_modules/sass-loader') || currentLoader.includes('node_modules/less-loader')) {
+                insertBeforeIndex = index
+              }
+            })
+
+            if (insertBeforeIndex !== -1) {
+              loaders.splice(insertBeforeIndex, 0, { loader: styleStripConditionalPath })
+            }
+            loaders.push({ loader: styleStripConditionalPath })
+          }
+
           switch (type) {
             case 'styles':
             case 'template': {

package/lib/platform/template/wx/component-config/input.js

@@ -92,7 +92,7 @@ module.exports = function ({ print }) {
         qa: qaPropLog
       },
       {
-        test: /^(placeholder-style|placeholder-class|cursor-spacing|always-embed|hold-keyboard|safe-password-.+)$/,
+        test: /^(placeholder-style|placeholder-class|always-embed|hold-keyboard|safe-password-.+)$/,
         ios: iosPropLog,
         android: androidPropLog
       }

package/lib/platform/template/wx/component-config/textarea.js

@@ -78,7 +78,7 @@ module.exports = function ({ print }) {
         }
       },
       {
-        test: /^(placeholder-style|placeholder-class|cursor-spacing|always-embed|hold-keyboard|disable-default-padding|adjust-keyboard-to|fixed|show-confirm-bar)$/,
+        test: /^(placeholder-style|placeholder-class|always-embed|hold-keyboard|disable-default-padding|adjust-keyboard-to|fixed|show-confirm-bar)$/,
         ios: iosPropLog,
         android: androidPropLog
       }

package/lib/platform/template/wx/component-config/unsupported.js

@@ -11,7 +11,7 @@ const JD_UNSUPPORTED_TAG_NAME_ARR = ['functional-page-navigator', 'live-pusher',
 // 快应用不支持的标签集合
 const QA_UNSUPPORTED_TAG_NAME_ARR = ['movable-view', 'movable-area', 'open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'cover-image']
 // RN不支持的标签集合
-const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'progress', 'slider', 'audio', 'camera', 'video', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
+const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'progress', 'slider', 'audio', 'camera', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
 
 /**
  * @param {function(object): function} print

package/lib/platform/template/wx/component-config/video.js

@@ -11,12 +11,24 @@ module.exports = function ({ print }) {
   const aliEventLogError = print({ platform: 'ali', tag: TAG_NAME, isError: false, type: 'event' })
   const qaPropLog = print({ platform: 'qa', tag: TAG_NAME, isError: false })
   const qaEventLogError = print({ platform: 'qa', tag: TAG_NAME, isError: false, type: 'event' })
+  const iosPropLog = print({ platform: 'ios', tag: TAG_NAME, isError: false })
+  const iosEventLogError = print({ platform: 'ios', tag: TAG_NAME, isError: false, type: 'event' })
+  const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false })
+  const androidEventLogError = print({ platform: 'android', tag: TAG_NAME, isError: false, type: 'event' })
   return {
     test: TAG_NAME,
     web (tag, { el }) {
       el.isBuiltIn = true
       return 'mpx-video'
     },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-video'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-video'
+    },
     props: [
       {
         test: /^(enable-danmu|danmu-btn|show-progress|play-btn-position|enable-play-gesture|auto-pause-if-navigate|auto-pause-if-open-native|vslide-gesture|vslide-gesture-in-fullscreen|ad-unit-id|poster-for-crawler|show-casting-button|picture-in-picture-mode|picture-in-picture-show-progress|enable-auto-rotation|show-snapshot-button|show-screen-lock-button)$/,
@@ -41,13 +53,20 @@ module.exports = function ({ print }) {
         qq: qqPropLog
       },
       {
-
         test: /^(duration|danmu-list|danmu-btn|enable-danmu|muted|initial-time|page-gesture|direction|show-progress|show-center-play-btn|enable-progress-gesture|show-mute-btn|title|enable-play-gesture|auto-pause-if-navigate|auto-pause-if-open-native|vslide-gesture|vslide-gesture-in-fullscreen|ad-unit-id|poster-for-crawler|show-casting-button|picture-in-picture-mode|picture-in-picture-show-progress|enable-auto-rotation|show-screen-lock-button|show-snapshot-button)$/,
         tt: ttPropLog
       },
       {
         test: /^(duration|danmu-list|danmu-btn|enable-danmu|muted|initial-time|page-gesture|direction|show-progress|show-center-play-btn|enable-progress-gesture|show-mute-btn|enable-play-gesture|auto-pause-if-navigate|auto-pause-if-open-native|vslide-gesture|vslide-gesture-in-fullscreen|ad-unit-id|poster-for-crawler|show-casting-button|picture-in-picture-mode|picture-in-picture-show-progress|enable-auto-rotation|show-screen-lock-button|show-snapshot-button)$/,
         qa: qaPropLog
+      },
+      {
+        test: /^(duration|enable-danmu|danmu-btn|page-gesture|direction|show-progress|show-fullscreen-btn|show-center-play-btn|enable-progress-gesture|show-mute-btn|title|play-btn-position|enable-play-gesture|auto-pause-if-navigate|auto-pause-if-open-native|vslide-gesture|vslide-gesture-in-fullscreen|show-bottom-progress|ad-unit-id|poster-for-crawler|show-casting-button|picture-in-picture-mode|picture-in-picture-show-progress| picture-in-picture-init-position|show-snapshot-button|show-screen-lock-button|show-background-playback-button|background-poster|referrer-policy|is-live)$/,
+        ios: iosPropLog
+      },
+      {
+        test: /^(duration|enable-danmu|danmu-btn|page-gesture|direction|show-progress|show-fullscreen-btn|show-center-play-btn|enable-progress-gesture|show-mute-btn|title|play-btn-position|enable-play-gesture|auto-pause-if-navigate|auto-pause-if-open-native|vslide-gesture|vslide-gesture-in-fullscreen|show-bottom-progress|ad-unit-id|poster-for-crawler|show-casting-button|picture-in-picture-mode|picture-in-picture-show-progress| picture-in-picture-init-position|enable-auto-rotation|show-snapshot-button|show-screen-lock-button|show-background-playback-button|background-poster|referrer-policy|is-live)$/,
+        android: androidPropLog
       }
     ],
     event: [
@@ -82,6 +101,14 @@ module.exports = function ({ print }) {
       {
         test: /^(progress|enterpictureinpicture|leavepictureinpicture|controlstoggle|loadedmetadata|seekcomplete)$/,
         qa: qaEventLogError
+      },
+      {
+        test: /^(progress|controlstoggle|enterpictureinpicture|leavepictureinpicture|castinguserselect|castingstatechange|castinginterrupt)$/,
+        ios: iosEventLogError
+      },
+      {
+        test: /^(progress|enterpictureinpicture|leavepictureinpicture|castinguserselect|castingstatechange|castinginterrupt)$/,
+        android: androidEventLogError
       }
     ]
   }

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

@@ -68,7 +68,7 @@ module.exports = function getSpec ({ warn, error }) {
           if (el) {
             const injectWxsProp = {
               injectWxsPath: '~' + normalize.lib('runtime/swanHelper.wxs'),
-              injectWxsModuleName: '__swanHelper__'
+              injectWxsModuleName: 'mpxSwanHelper'
             }
             if (el.injectWxsProps && Array.isArray(el.injectWxsProps)) {
               el.injectWxsProps.push(injectWxsProp)
@@ -78,7 +78,7 @@ module.exports = function getSpec ({ warn, error }) {
           }
           return {
             name: 's-for',
-            value: `${itemName}, ${indexName} in __swanHelper__.processFor(${listName})${keyStr}`
+            value: `${itemName}, ${indexName} in mpxSwanHelper.processFor(${listName})${keyStr}`
           }
         },
         web ({ value }, { el }) {

package/lib/react/processScript.js

@@ -26,17 +26,19 @@ module.exports = function (script, {
     output += `
 import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
 import { NavigationContainer, StackActions } from '@react-navigation/native'
-import { createStackNavigator } from '@react-navigation/stack'
-import { Provider } from '@ant-design/react-native'
+import { createNativeStackNavigator } from '@react-navigation/native-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'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 
 global.__navigationHelper = {
   NavigationContainer: NavigationContainer,
-  createStackNavigator: createStackNavigator,
+  createStackNavigator: createNativeStackNavigator,
+  useHeaderHeight: useHeaderHeight,
   StackActions: StackActions,
   GestureHandlerRootView: GestureHandlerRootView,
-  Provider: Provider,
+  PortalHost: PortalHost,
   SafeAreaProvider: SafeAreaProvider,
   useSafeAreaInsets: useSafeAreaInsets
 }\n`

package/lib/react/processTemplate.js

@@ -28,9 +28,10 @@ module.exports = function (template, {
     externalClasses,
     checkUsingComponents,
     autoVirtualHostRules,
+    forceProxyEventRules,
     customTextRules
   } = mpx
-  const { resourcePath } = parseRequest(loaderContext.resource)
+  const { resourcePath, rawResourcePath } = parseRequest(loaderContext.resource)
   const builtInComponentsMap = {}
 
   let genericsInfo
@@ -77,7 +78,7 @@ module.exports = function (template, {
         // todo 后续输出web也采用mpx的scoped处理
         hasScoped: false,
         moduleId,
-        filePath: resourcePath,
+        filePath: rawResourcePath,
         // react中模版i18n不需要特殊处理
         i18n: null,
         checkUsingComponents,
@@ -86,12 +87,13 @@ module.exports = function (template, {
         // web模式下实现抽象组件
         componentGenerics,
         hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules),
+        forceProxyEvent: matchCondition(resourcePath, forceProxyEventRules),
         isCustomText: matchCondition(resourcePath, customTextRules)
       })
 
       if (meta.wxsContentMap) {
         for (const module in meta.wxsContentMap) {
-          wxsContentMap[`${resourcePath}~${module}`] = meta.wxsContentMap[module]
+          wxsContentMap[`${rawResourcePath}~${module}`] = meta.wxsContentMap[module]
         }
       }
       if (meta.builtInComponentsMap) {

package/lib/runtime/components/react/KeyboardAvoidingView.tsx

@@ -0,0 +1,108 @@
+import React, { ReactNode, useContext, useEffect } from 'react'
+import { DimensionValue, EmitterSubscription, Keyboard, Platform, View, ViewStyle } from 'react-native'
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated'
+import { KeyboardAvoidContext } from './context'
+import { extendObject } from './utils'
+
+type KeyboardAvoidViewProps = {
+  children?: ReactNode
+  style?: ViewStyle
+  contentContainerStyle?: ViewStyle
+}
+
+const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: KeyboardAvoidViewProps) => {
+  const isIOS = Platform.OS === 'ios'
+  const duration = isIOS ? 250 : 300
+  const easing = isIOS ? Easing.inOut(Easing.ease) : Easing.out(Easing.quad)
+
+  const offset = useSharedValue(0)
+  const basic = useSharedValue('auto')
+  const keyboardAvoid = useContext(KeyboardAvoidContext)
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return Object.assign(
+      {
+        transform: [{ translateY: -offset.value }]
+      },
+      isIOS ? {} : { flexBasis: basic.value as DimensionValue }
+    )
+  })
+
+  const resetKeyboard = () => {
+    keyboardAvoid?.current && extendObject(keyboardAvoid.current, {
+      cursorSpacing: 0,
+      ref: null
+    })
+    offset.value = withTiming(0, { duration, easing })
+    basic.value = 'auto'
+  }
+
+  useEffect(() => {
+    let subscriptions: EmitterSubscription[] = []
+
+    if (isIOS) {
+      subscriptions = [
+        Keyboard.addListener('keyboardWillShow', (evt: any) => {
+          if (!keyboardAvoid?.current) return
+          const { endCoordinates } = evt
+          const { ref, cursorSpacing = 0 } = keyboardAvoid.current
+          setTimeout(() => {
+            ref?.current?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
+              const aboveOffset = offset.value + pageY + height - endCoordinates.screenY
+              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 })
+            })
+          })
+        }),
+        Keyboard.addListener('keyboardWillHide', resetKeyboard)
+      ]
+    } else {
+      subscriptions = [
+        Keyboard.addListener('keyboardDidShow', (evt: any) => {
+          if (!keyboardAvoid?.current) return
+          const { endCoordinates } = evt
+          const { ref, cursorSpacing = 0 } = keyboardAvoid.current
+          ref?.current?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
+            const aboveOffset = pageY + height - endCoordinates.screenY
+            const belowOffset = endCoordinates.height - aboveOffset
+            const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing
+            const belowValue = Math.min(belowOffset, cursorSpacing)
+            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
+                 */
+                basic.value = '99.99%'
+              }
+            })
+          })
+        }),
+        Keyboard.addListener('keyboardDidHide', resetKeyboard)
+      ]
+    }
+
+    return () => {
+      subscriptions.forEach(subscription => subscription.remove())
+    }
+  }, [keyboardAvoid])
+
+  return (
+    <View style={style}>
+      <Animated.View
+        style={[
+          contentContainerStyle,
+          animatedStyle
+        ]}
+      >
+        {children}
+      </Animated.View>
+    </View>
+  )
+}
+
+export default KeyboardAvoidingView

package/lib/runtime/components/react/context.ts

@@ -5,7 +5,10 @@ export type LabelContextValue = MutableRefObject<{
   triggerChange: (evt: NativeSyntheticEvent<TouchEvent>) => void
 }>
 
-export type KeyboardAvoidContextValue = (enabled: boolean) => void
+export type KeyboardAvoidContextValue = MutableRefObject<{
+  cursorSpacing: number
+  ref: MutableRefObject<any>
+}>
 
 export interface GroupValue {
   [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>> }
@@ -33,10 +36,21 @@ export interface IntersectionObserver {
   }
 }
 
+export interface PortalContextValue {
+  mount: (children: React.ReactNode, key?: number | null, id?: number| null) => number| undefined
+  update: (key: number, children: React.ReactNode) => void
+  unmount: (key: number) => void
+}
+
 export interface ScrollViewContextValue {
    gestureRef: React.RefObject<any> | null
 }
 
+export interface RouteContextValue {
+  pageId: number
+  navigation: Record<string, any>
+}
+
 export const MovableAreaContext = createContext({ width: 0, height: 0 })
 
 export const FormContext = createContext<FormContextValue | null>(null)
@@ -53,10 +67,12 @@ export const VarContext = createContext({})
 
 export const IntersectionObserverContext = createContext<IntersectionObserver | null>(null)
 
-export const RouteContext = createContext<number | null>(null)
+export const RouteContext = createContext<RouteContextValue | null>(null)
 
 export const SwiperContext = createContext({})
 
 export const KeyboardAvoidContext = createContext<KeyboardAvoidContextValue | null>(null)
 
 export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null })
+
+export const PortalContext = createContext<PortalContextValue>(null as any)

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

@@ -0,0 +1,89 @@
+import React, { useContext, useEffect } from 'react';
+import { Keyboard, Platform, View } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
+import { KeyboardAvoidContext } from './context';
+import { extendObject } from './utils';
+const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
+    const isIOS = Platform.OS === 'ios';
+    const duration = isIOS ? 250 : 300;
+    const easing = isIOS ? Easing.inOut(Easing.ease) : Easing.out(Easing.quad);
+    const offset = useSharedValue(0);
+    const basic = useSharedValue('auto');
+    const keyboardAvoid = useContext(KeyboardAvoidContext);
+    const animatedStyle = useAnimatedStyle(() => {
+        return Object.assign({
+            transform: [{ translateY: -offset.value }]
+        }, isIOS ? {} : { flexBasis: basic.value });
+    });
+    const resetKeyboard = () => {
+        keyboardAvoid?.current && extendObject(keyboardAvoid.current, {
+            cursorSpacing: 0,
+            ref: null
+        });
+        offset.value = withTiming(0, { duration, easing });
+        basic.value = 'auto';
+    };
+    useEffect(() => {
+        let subscriptions = [];
+        if (isIOS) {
+            subscriptions = [
+                Keyboard.addListener('keyboardWillShow', (evt) => {
+                    if (!keyboardAvoid?.current)
+                        return;
+                    const { endCoordinates } = evt;
+                    const { ref, cursorSpacing = 0 } = keyboardAvoid.current;
+                    setTimeout(() => {
+                        ref?.current?.measure((x, y, width, height, pageX, pageY) => {
+                            const aboveOffset = offset.value + pageY + height - endCoordinates.screenY;
+                            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 });
+                        });
+                    });
+                }),
+                Keyboard.addListener('keyboardWillHide', resetKeyboard)
+            ];
+        }
+        else {
+            subscriptions = [
+                Keyboard.addListener('keyboardDidShow', (evt) => {
+                    if (!keyboardAvoid?.current)
+                        return;
+                    const { endCoordinates } = evt;
+                    const { ref, cursorSpacing = 0 } = keyboardAvoid.current;
+                    ref?.current?.measure((x, y, width, height, pageX, pageY) => {
+                        const aboveOffset = pageY + height - endCoordinates.screenY;
+                        const belowOffset = endCoordinates.height - aboveOffset;
+                        const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
+                        const belowValue = Math.min(belowOffset, cursorSpacing);
+                        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
+                                 */
+                                basic.value = '99.99%';
+                            }
+                        });
+                    });
+                }),
+                Keyboard.addListener('keyboardDidHide', resetKeyboard)
+            ];
+        }
+        return () => {
+            subscriptions.forEach(subscription => subscription.remove());
+        };
+    }, [keyboardAvoid]);
+    return (<View style={style}>
+      <Animated.View style={[
+            contentContainerStyle,
+            animatedStyle
+        ]}>
+        {children}
+      </Animated.View>
+    </View>);
+};
+export default KeyboardAvoidingView;

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

@@ -11,3 +11,4 @@ export const RouteContext = createContext(null);
 export const SwiperContext = createContext({});
 export const KeyboardAvoidContext = createContext(null);
 export const ScrollViewContext = createContext({ gestureRef: null });
+export const PortalContext = createContext(null);

package/lib/runtime/components/react/dist/event.config.js

@@ -1,3 +1,4 @@
+export const TAP_EVENTS = ['bindtap', 'catchtap', 'capture-bindtap', 'capture-catchtap'];
 const eventConfigMap = {
     bindtap: { bitFlag: '0', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd'] },
     bindlongpress: { bitFlag: '1', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'] },

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

@@ -1,8 +1,7 @@
 import { useRef, useMemo } from 'react';
 import { hasOwn, collectDataset } from '@mpxjs/utils';
-import { useNavigation } from '@react-navigation/native';
-import { omit, extendObject } from './utils';
-import eventConfigMap from './event.config';
+import { omit, extendObject, useNavigation } from './utils';
+import eventConfigMap, { TAP_EVENTS } from './event.config';
 const globalEventState = {
     needPress: true
 };
@@ -137,11 +136,15 @@ function handleTouchmove(e, type, ref, propsRef, config, navigation) {
     ];
     const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
     handleEmitEvent(currentTouchEvent, 'touchmove', e, propsRef, config, navigation);
-    checkIsNeedPress(e, type, ref);
+    if (TAP_EVENTS.some(eventName => propsRef.current[eventName])) {
+        checkIsNeedPress(e, type, ref);
+    }
 }
 function handleTouchend(e, type, ref, propsRef, config, navigation) {
     // move event may not be triggered
-    checkIsNeedPress(e, type, ref);
+    if (TAP_EVENTS.some(eventName => propsRef.current[eventName])) {
+        checkIsNeedPress(e, type, ref);
+    }
     const bubbleTouchEvent = ['catchtouchend', 'bindtouchend'];
     const bubbleTapEvent = ['catchtap', 'bindtap'];
     const captureTouchEvent = [

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

@@ -130,7 +130,7 @@ const Loading = ({ alone = false }) => {
 const Button = forwardRef((buttonProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(buttonProps);
     const { size = 'default', type = 'default', plain = false, disabled = false, loading = false, 'hover-class': hoverClass, 'hover-style': hoverStyle = {}, 'hover-start-time': hoverStartTime = 20, 'hover-stay-time': hoverStayTime = 70, 'open-type': openType, 'form-type': formType, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, style = {}, children, bindgetuserinfo, bindtap } = props;
-    const pageId = useContext(RouteContext);
+    const { pageId } = useContext(RouteContext) || {};
     const formContext = useContext(FormContext);
     const enableHover = hoverClass !== 'none';
     const { isHover, gesture } = useHover({ enableHover, hoverStartTime, hoverStayTime, disabled });

package/lib/runtime/components/react/dist/mpx-icon/index.jsx

@@ -0,0 +1,50 @@
+/**
+ * ✔ type
+ * ✔ size
+ * ✔ color
+ */
+import { forwardRef, useRef, createElement } from 'react';
+import { Image } from 'react-native';
+import useInnerProps from '../getInnerListeners';
+import useNodesRef from '../useNodesRef';
+import { useLayout, useTransformStyle, extendObject } from '../utils';
+import Success from './icons/success.png';
+import SuccessNoCircle from './icons/success_no_circle.png';
+import Info from './icons/info.png';
+import Warn from './icons/warn.png';
+import Waiting from './icons/waiting.png';
+import Cancel from './icons/cancel.png';
+import Download from './icons/download.png';
+import Search from './icons/search.png';
+import Clear from './icons/clear.png';
+const IconTypeMap = new Map([
+    ['success', Success],
+    ['success_no_circle', SuccessNoCircle],
+    ['info', Info],
+    ['warn', Warn],
+    ['waiting', Waiting],
+    ['cancel', Cancel],
+    ['download', Download],
+    ['search', Search],
+    ['clear', Clear]
+]);
+const Icon = forwardRef((props, ref) => {
+    const { type, size = 23, color, style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const source = IconTypeMap.get(type);
+    const defaultStyle = { width: ~~size, height: ~~size };
+    const styleObj = extendObject({}, defaultStyle, style);
+    const { hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, { style: normalStyle });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
+    const innerProps = useInnerProps(props, extendObject({
+        ref: nodeRef,
+        source,
+        style: extendObject({}, normalStyle, layoutStyle, { tintColor: color })
+    }, layoutProps), [], {
+        layoutRef
+    });
+    return createElement(Image, innerProps);
+});
+Icon.displayName = 'MpxIcon';
+export default Icon;