@mpxjs/webpack-plugin 2.9.69-beta.3 → 2.9.69-beta.4

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

@@ -0,0 +1,31 @@
+import { createContext, useMemo } from 'react';
+import LocaleProvider from './locale-provider';
+import Portal from './mpx-portal';
+import { extendObject } from './utils';
+const defaultTheme = {
+    color_text_base: '#000000',
+    color_text_base_inverse: '#ffffff',
+    color_text_secondary: '#a4a9b0',
+    color_text_placeholder: '#bbbbbb',
+    color_text_disabled: '#bbbbbb',
+    color_text_caption: '#888888',
+    color_text_paragraph: '#333333',
+    color_error: '#ff4d4f',
+    color_warning: '#faad14',
+    color_success: '#52c41a',
+    color_primary: '#1677ff'
+};
+export const ThemeContext = createContext(defaultTheme);
+const ThemeProvider = (props) => {
+    const { value, children } = props;
+    const theme = useMemo(() => (extendObject({}, defaultTheme, value)), [value]);
+    return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
+};
+const Provider = ({ locale, theme, children }) => {
+    return (<LocaleProvider locale={locale}>
+      <ThemeProvider value={theme}>
+        <Portal.Host>{children}</Portal.Host>
+      </ThemeProvider>
+    </LocaleProvider>);
+};
+export default Provider;

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

@@ -2,7 +2,7 @@
  * ✔ enable
  */
 import { createElement, Fragment } from 'react';
-import { Portal } from '@ant-design/react-native';
+import Portal from './mpx-portal';
 import { warn } from '@mpxjs/utils';
 const _RootPortal = (props) => {
     const { children, enable = true } = props;

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

@@ -32,7 +32,7 @@
  * ✔ bindscroll
  */
 import { ScrollView } from 'react-native-gesture-handler';
-import { RefreshControl, Platform } from 'react-native';
+import { RefreshControl } from 'react-native';
 import { useRef, useState, useEffect, forwardRef, useContext, createElement, useMemo } from 'react';
 import { useAnimatedRef } from 'react-native-reanimated';
 import { warn } from '@mpxjs/utils';
@@ -184,7 +184,6 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             visibleLength
         });
     }
-    const observerTimers = {};
     function onScroll(e) {
         const { bindscroll } = props;
         const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
@@ -202,20 +201,6 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
                 layoutRef
             }, props));
         updateScrollOptions(e, { scrollLeft, scrollTop });
-        if (enableTriggerIntersectionObserver && intersectionObservers) {
-            for (const key in intersectionObservers) {
-                if (Platform.OS === 'android') {
-                    intersectionObservers[key].throttleMeasure();
-                }
-                else {
-                    // TODO: 由于iOS在onScroll滚动的过程中view的计算measureInWindow计算的值不发生变化，所以暂时在ios上加一个延时计算
-                    observerTimers[key] && clearTimeout(observerTimers[key]);
-                    observerTimers[key] = setTimeout(() => {
-                        intersectionObservers[key].throttleMeasure();
-                    }, 300);
-                }
-            }
-        }
     }
     function onScrollEnd(e) {
         const { bindscrollend } = props;
@@ -234,6 +219,14 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         updateScrollOptions(e, { scrollLeft, scrollTop });
         onStartReached(e);
         onEndReached(e);
+        updateIntersection();
+    }
+    function updateIntersection() {
+        if (enableTriggerIntersectionObserver && intersectionObservers) {
+            for (const key in intersectionObservers) {
+                intersectionObservers[key].throttleMeasure();
+            }
+        }
     }
     function scrollToOffset(x = 0, y = 0) {
         if (scrollViewRef.current) {
@@ -292,6 +285,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     function onScrollDrag(e) {
         const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
         updateScrollOptions(e, { scrollLeft, scrollTop });
+        updateIntersection();
     }
     const scrollAdditionalProps = extendObject({
         style: extendObject({}, innerStyle, layoutStyle),

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

@@ -361,8 +361,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         let isCriticalItem = false;
         // 真实滚动到的偏移量坐标
         let moveToTargetPos = 0;
-        // 当前的位置
-        const currentOffset = offset.value - previousMargin;
+        const currentOffset = translation < 0 ? offset.value - previousMargin : offset.value + previousMargin;
         const computedIndex = Math.abs(currentOffset) / step.value;
         const moveToIndex = translation < 0 ? Math.ceil(computedIndex) : Math.floor(computedIndex);
         // 实际应该定位的索引值
@@ -442,10 +441,13 @@ const SwiperWrapper = forwardRef((props, ref) => {
         'worklet';
         const { translation } = eventData;
         // 向右滑动的back:trans < 0， 向左滑动的back: trans < 0
-        const currentOffset = Math.abs(offset.value);
+        let currentOffset = Math.abs(offset.value);
+        if (props.circular) {
+            currentOffset += translation < 0 ? previousMargin : -previousMargin;
+        }
         const curIndex = currentOffset / step.value;
         const moveToIndex = (translation < 0 ? Math.floor(curIndex) : Math.ceil(curIndex)) - patchElementNum;
-        const targetOffset = -(moveToIndex + patchElementNum) * step.value + (translation < 0 ? -previousMargin : previousMargin);
+        const targetOffset = -(moveToIndex + patchElementNum) * step.value + (props.circular ? -previousMargin : 0);
         offset.value = withTiming(targetOffset, {
             duration: easeDuration,
             easing: easeMap[easeingFunc]
@@ -459,7 +461,10 @@ const SwiperWrapper = forwardRef((props, ref) => {
     function handleLongPress(eventData) {
         'worklet';
         const { translation } = eventData;
-        const currentOffset = Math.abs(offset.value) + (translation < 0 ? previousMargin : -previousMargin);
+        let currentOffset = Math.abs(offset.value);
+        if (props.circular) {
+            currentOffset += previousMargin;
+        }
         const half = currentOffset % step.value > step.value / 2;
         // 向右trans < 0, 向左trans > 0
         const isExceedHalf = translation < 0 ? half : !half;

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

@@ -528,6 +528,11 @@ function wrapImage(imageStyle, innerStyle, enableFastImage) {
   </View>;
 }
 function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps, innerStyle, enableFastImage }) {
+    enableBackground = enableBackground || !!backgroundStyle;
+    const enableBackgroundRef = useRef(enableBackground);
+    if (enableBackgroundRef.current !== enableBackground) {
+        error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.');
+    }
     const children = wrapChildren(props, {
         hasVarDec,
         varContext,
@@ -541,7 +546,7 @@ function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backg
 }
 const _View = forwardRef((viewProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(viewProps);
-    let { style = {}, 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'enable-background': enableBackground, 'enable-fast-image': enableFastImage, 'enable-animation': enableAnimation, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, animation } = props;
+    const { style = {}, 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'enable-background': enableBackground, 'enable-fast-image': enableFastImage, 'enable-animation': enableAnimation, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, animation } = props;
     // 默认样式
     const defaultStyle = style.display === 'flex'
         ? {
@@ -561,31 +566,20 @@ const _View = forwardRef((viewProps, ref) => {
         parentHeight
     });
     const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle);
-    enableBackground = enableBackground || !!backgroundStyle;
-    const enableBackgroundRef = useRef(enableBackground);
-    if (enableBackgroundRef.current !== enableBackground) {
-        error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.');
-    }
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, {
         style: normalStyle
     });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const viewStyle = extendObject({}, innerStyle, layoutStyle);
-    enableAnimation = enableAnimation || !!animation;
-    const enableAnimationRef = useRef(enableAnimation);
-    if (enableAnimationRef.current !== enableAnimation) {
-        error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.');
-    }
-    const finalStyle = enableAnimationRef.current
-        ? [viewStyle, useAnimationHooks({
-                animation,
-                style: viewStyle
-            })]
-        : viewStyle;
+    const { enableStyleAnimation, animationStyle } = useAnimationHooks({
+        enableAnimation,
+        animation,
+        style: viewStyle
+    });
     const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: finalStyle
+        style: enableStyleAnimation ? [viewStyle, animationStyle] : viewStyle
     }, layoutProps), [
         'hover-start-time',
         'hover-stay-time',
@@ -596,7 +590,7 @@ const _View = forwardRef((viewProps, ref) => {
     });
     const childNode = wrapWithChildren(props, {
         hasVarDec,
-        enableBackground: enableBackgroundRef.current,
+        enableBackground,
         textStyle,
         backgroundStyle,
         varContext: varContextRef.current,
@@ -604,8 +598,8 @@ const _View = forwardRef((viewProps, ref) => {
         innerStyle,
         enableFastImage
     });
-    const BaseComponent = enableAnimation
-        ? createElement(Animated.View, extendObject({}, innerProps, { style: finalStyle }), childNode)
+    const BaseComponent = enableStyleAnimation
+        ? createElement(Animated.View, innerProps, childNode)
         : createElement(View, innerProps, childNode);
     return enableHoverStyle
         ? createElement(GestureDetector, { gesture }, BaseComponent)

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

@@ -1,20 +1,56 @@
-import { forwardRef, useRef, useContext, useMemo, createElement, useCallback, useEffect } from 'react';
+import { forwardRef, useRef, useContext, useMemo, useState, useCallback, useEffect } from 'react';
 import { warn, getFocusedNavigation, isFunction } from '@mpxjs/utils';
-import { Portal } from '@ant-design/react-native';
+import Portal from './mpx-portal';
 import { getCustomEvent } from './getInnerListeners';
 import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy';
 import { WebView } from 'react-native-webview';
 import useNodesRef from './useNodesRef';
 import { getCurrentPage, extendObject } from './utils';
 import { RouteContext } from './context';
-import { BackHandler } from 'react-native';
+import { BackHandler, StyleSheet, View, Text, Platform } from 'react-native';
+const styles = StyleSheet.create({
+    loadErrorContext: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    loadErrorText: {
+        fontSize: 12,
+        color: '#666666',
+        paddingTop: '40%',
+        paddingBottom: 20,
+        paddingLeft: '10%',
+        paddingRight: '10%',
+        textAlign: 'center'
+    },
+    loadErrorButton: {
+        color: '#666666',
+        textAlign: 'center',
+        padding: 10,
+        borderColor: '#666666',
+        borderStyle: 'solid',
+        borderWidth: StyleSheet.hairlineWidth,
+        borderRadius: 10
+    }
+});
 const _WebView = forwardRef((props, ref) => {
     const { src, bindmessage, bindload, binderror } = props;
     const mpx = global.__mpx;
+    const errorText = {
+        'zh-CN': {
+            text: '网络不可用，请检查网络设置',
+            button: '重新加载'
+        },
+        'en-US': {
+            text: 'The network is not available. Please check the network settings',
+            button: 'Reload'
+        }
+    };
+    const currentErrorText = errorText[mpx.i18n.locale || 'zh-CN'];
     if (props.style) {
         warn('The web-view component does not support the style prop.');
     }
     const pageId = useContext(RouteContext);
+    const [pageLoadErr, setPageLoadErr] = useState(false);
     const currentPage = useMemo(() => getCurrentPage(pageId), [pageId]);
     const webViewRef = useRef(null);
     const defaultWebViewStyle = {
@@ -39,12 +75,34 @@ const _WebView = forwardRef((props, ref) => {
         }
     }, [canGoBack]);
     const navigation = getFocusedNavigation();
+    // ios 16以下版本 的hash会被转义，因此对于iOS环境下在页面load之后再注入hash部分的逻辑
+    let [baseUrl, hashParams = ''] = src.split('#');
+    if (hashParams)
+        hashParams = '#' + hashParams;
+    const source = useMemo(() => {
+        if (Platform.OS === 'ios') {
+            return { uri: baseUrl };
+        }
+        return { uri: baseUrl + hashParams };
+    }, [baseUrl, hashParams]);
+    const hashInjectedJavascript = useMemo(() => {
+        if (Platform.OS === 'ios' && hashParams) {
+            return `(function() {
+        try {
+          location.hash = '${hashParams}';
+        } catch(e) {
+        }
+      })()`;
+        }
+        return '';
+    }, [hashParams]);
     navigation?.addListener('beforeRemove', beforeRemoveHandle);
     useEffect(() => {
         if (__mpx_mode__ === 'android') {
             BackHandler.addEventListener('hardwareBackPress', onAndroidBackPress);
             return () => {
                 BackHandler.removeEventListener('hardwareBackPress', onAndroidBackPress);
+                navigation?.removeListener('beforeRemove', beforeRemoveHandle);
             };
         }
     }, []);
@@ -65,6 +123,7 @@ const _WebView = forwardRef((props, ref) => {
         bindload?.(result);
     };
     const _error = function (res) {
+        setPageLoadErr(true);
         const result = {
             type: 'error',
             timeStamp: res.timeStamp,
@@ -72,7 +131,10 @@ const _WebView = forwardRef((props, ref) => {
                 src: ''
             }
         };
-        binderror?.(result);
+        binderror && binderror(result);
+    };
+    const _reload = function () {
+        setPageLoadErr(false);
     };
     const injectedJavaScript = `
     if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
@@ -97,6 +159,7 @@ const _WebView = forwardRef((props, ref) => {
           return _documentTitle
         }
       });
+      ${hashInjectedJavascript}
     }
     true;
   `;
@@ -207,22 +270,17 @@ const _WebView = forwardRef((props, ref) => {
             onLoad: _load
         });
     }
-    if (binderror) {
-        extendObject(events, {
-            onError: _error
-        });
-    }
-    return createElement(Portal, null, createElement(WebView, extendObject({
-        style: defaultWebViewStyle,
-        source: { uri: src },
-        ref: webViewRef,
-        javaScriptEnabled: true,
-        onNavigationStateChange: _changeUrl,
-        onMessage: _message,
-        injectedJavaScript: injectedJavaScript,
-        onLoadProgress: _onLoadProgress,
-        allowsBackForwardNavigationGestures: true
-    }, events)));
+    extendObject(events, {
+        onError: _error
+    });
+    return (<Portal key={pageLoadErr ? 'error' : 'webview'}>
+        {pageLoadErr
+            ? (<View style={[styles.loadErrorContext, defaultWebViewStyle]}>
+              <View style={styles.loadErrorText}><Text style={{ fontSize: 14, color: '#999999' }}>{currentErrorText.text}</Text></View>
+              <View style={styles.loadErrorButton} onTouchEnd={_reload}><Text style={{ fontSize: 12, color: '#666666' }}>{currentErrorText.button}</Text></View>
+            </View>)
+            : (<WebView style={defaultWebViewStyle} source={source} ref={webViewRef} javaScriptEnabled={true} onNavigationStateChange={_changeUrl} onMessage={_message} injectedJavaScript={injectedJavaScript} onLoadProgress={_onLoadProgress} allowsBackForwardNavigationGestures={true} {...events}></WebView>)}
+      </Portal>);
 });
 _WebView.displayName = 'MpxWebview';
 export default _WebView;

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

@@ -49,7 +49,7 @@ export const createFaces = (itemHeight, visibleCount) => {
     };
     const degrees = getDegreesRelativeCenter();
     const [screenHeight, offsets] = getScreenHeightsAndOffsets(degrees);
-    const scales = [1, 0.925, 0.8];
+    const scales = [0.973, 0.9, 0.8];
     return [
         // top items
         ...degrees

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

@@ -1,5 +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';
 // 微信 timingFunction 和 RN Easing 对应关系
 const EasingKey = {
     linear: Easing.linear,
@@ -132,7 +133,14 @@ const formatStyle = (style) => {
     });
 };
 export default function useAnimationHooks(props) {
-    const { style = {}, animation } = props;
+    const { style = {}, animation, enableAnimation } = props;
+    const enableStyleAnimation = enableAnimation || !!animation;
+    const enableAnimationRef = useRef(enableStyleAnimation);
+    if (enableAnimationRef.current !== enableStyleAnimation) {
+        error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.');
+    }
+    if (!enableStyleAnimation)
+        return { enableStyleAnimation };
     const originalStyle = formatStyle(style);
     // id 标识
     const id = animation?.id || -1;
@@ -307,7 +315,7 @@ export default function useAnimationHooks(props) {
         }, {});
     }
     // ** 生成动画样式
-    return useAnimatedStyle(() => {
+    const animationStyle = useAnimatedStyle(() => {
         // console.info(`useAnimatedStyle styles=`, originalStyle)
         return animatedStyleKeys.value.reduce((styles, key) => {
             // console.info('getAnimationStyles', key, shareValMap[key].value)
@@ -326,4 +334,8 @@ export default function useAnimationHooks(props) {
             return styles;
         }, {});
     });
+    return {
+        enableStyleAnimation,
+        animationStyle
+    };
 }

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

@@ -126,8 +126,8 @@ function checkIsNeedPress (e: NativeTouchEvent, type: 'bubble' | 'capture', ref:
   const currentPageX = nativeEvent.changedTouches[0].pageX
   const currentPageY = nativeEvent.changedTouches[0].pageY
   if (
-    Math.abs(currentPageX - tapDetailInfo.x) > 1 ||
-        Math.abs(currentPageY - tapDetailInfo.y) > 1
+    Math.abs(currentPageX - tapDetailInfo.x) > 3 ||
+        Math.abs(currentPageY - tapDetailInfo.y) > 3
   ) {
     ref.current!.needPress[type] = false
     ref.current!.startTimer[type] &&
@@ -289,7 +289,6 @@ const useInnerProps = (
   const eventConfig: { [key: string]: string[] } = {}
   const config = rawConfig || {
     layoutRef: { current: {} },
-    disableTouch: false,
     disableTap: false
   }
   const removeProps = [
@@ -317,11 +316,10 @@ const useInnerProps = (
     }
   }
 
-  if (!rawEventKeys.length || config.disableTouch) {
-    return omit(propsRef.current, removeProps)
-  }
-
   const events = useMemo(() => {
+    if (!rawEventKeys.length) {
+      return {}
+    }
     const transformedEventKeys = rawEventKeys.reduce((acc: string[], key) => {
       if (propsRef.current[key]) {
         return acc.concat(eventConfig[key])

package/lib/runtime/components/react/locale-provider.tsx

@@ -0,0 +1,83 @@
+import { createContext, useMemo, memo, ReactNode } from 'react'
+import { extendObject } from './utils'
+
+interface Locale {
+  /** zh_CN */
+  locale: string
+  DatePicker: {
+    /** 确定 */
+    okText: string
+    /** 取消 */
+    dismissText: string
+    /** 请选择 */
+    extra: string
+    DatePickerLocale: {
+      /** 年 */
+      year: string
+      /** 月 */
+      month: string
+      /** 日 */
+      day: string
+      /** 时 */
+      hour: string
+      /** 分 */
+      minute: string
+      /** 上午 */
+      am: string
+      /** 下午 */
+      pm: string
+    }
+  }
+  DatePickerView: {
+    /** 年 */
+    year: string
+    /** 月 */
+    month: string
+    /** 日 */
+    day: string
+    /** 时 */
+    hour: string
+    /** 分 */
+    minute: string
+    /** 上午 */
+    am: string
+    /** 下午 */
+    pm: string
+  }
+  Picker: {
+    /** 确定 */
+    okText: string
+    /** 取消 */
+    dismissText: string
+    /** 请选择 */
+    extra: string
+  }
+}
+export type LocaleContextProps = {
+  antLocale: Partial<Locale & { exist: boolean }>
+}
+export interface LocaleProviderProps {
+  children?: ReactNode,
+  locale?: LocaleContextProps
+}
+
+export const LocaleContext = createContext<
+  LocaleContextProps | undefined
+>(undefined)
+
+const LocaleProvider = (props :LocaleProviderProps): JSX.Element => {
+  const locale = useMemo(() => {
+    return {
+      antLocale: extendObject({}, props.locale, { exist: true })
+    }
+  }, [props.locale])
+  return (
+    <LocaleContext.Provider value={locale}>
+      {props.children}
+    </LocaleContext.Provider>
+  )
+}
+
+LocaleProvider.displayName = 'LocaleProvider'
+
+export default memo(LocaleProvider)

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

@@ -34,7 +34,7 @@
  * ✘ bindagreeprivacyauthorization
  * ✔ bindtap
  */
-import { createElement, useEffect, useRef, useState, ReactNode, forwardRef, useContext, JSX } from 'react'
+import { createElement, useEffect, useRef, ReactNode, forwardRef, useContext, JSX } from 'react'
 import {
   View,
   StyleSheet,
@@ -45,10 +45,12 @@ import {
   NativeSyntheticEvent
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
-import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
+import { GestureDetector } from 'react-native-gesture-handler'
+import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHoverStyle } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { RouteContext, FormContext } from './context'
+import type { ExtendedViewStyle } from './types/common'
 
 export type Type = 'default' | 'primary' | 'warn'
 
@@ -68,7 +70,7 @@ export interface ButtonProps {
   disabled?: boolean
   loading?: boolean
   'hover-class'?: string
-  'hover-style'?: ViewStyle & TextStyle & Record<string, any>
+  'hover-style'?: ExtendedViewStyle
   'hover-start-time'?: number
   'hover-stay-time'?: number
   'open-type'?: OpenType
@@ -83,8 +85,6 @@ export interface ButtonProps {
   children: ReactNode
   bindgetuserinfo?: (userInfo: any) => void
   bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
-  bindtouchstart?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
-  bindtouchend?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
 
 const LOADING_IMAGE_URI =
@@ -216,15 +216,15 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     style = {},
     children,
     bindgetuserinfo,
-    bindtap,
-    bindtouchstart,
-    bindtouchend
+    bindtap
   } = props
 
   const pageId = useContext(RouteContext)
 
   const formContext = useContext(FormContext)
 
+  const { isHover, enableHoverStyle, gesture } = useHoverStyle({ hoverStyle, hoverStartTime, hoverStayTime, disabled })
+
   let submitFn: () => void | undefined
   let resetFn: () => void | undefined
 
@@ -233,16 +233,6 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     resetFn = formContext.reset
   }
 
-  const refs = useRef<{
-    hoverStartTimer: ReturnType<typeof setTimeout> | undefined
-    hoverStayTimer: ReturnType<typeof setTimeout> | undefined
-  }>({
-    hoverStartTimer: undefined,
-    hoverStayTimer: undefined
-  })
-
-  const [isHover, setIsHover] = useState(false)
-
   const isMiniSize = size === 'mini'
 
   const applyHoverEffect = isHover && hoverClass !== 'none'
@@ -366,34 +356,6 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     }
   }
 
-  const setStayTimer = () => {
-    clearTimeout(refs.current.hoverStayTimer)
-    refs.current.hoverStayTimer = setTimeout(() => {
-      setIsHover(false)
-      clearTimeout(refs.current.hoverStayTimer)
-    }, hoverStayTime)
-  }
-
-  const setStartTimer = () => {
-    clearTimeout(refs.current.hoverStartTimer)
-    refs.current.hoverStartTimer = setTimeout(() => {
-      setIsHover(true)
-      clearTimeout(refs.current.hoverStartTimer)
-    }, hoverStartTime)
-  }
-
-  const onTouchStart = (evt: NativeSyntheticEvent<TouchEvent>) => {
-    bindtouchstart && bindtouchstart(evt)
-    if (disabled) return
-    setStartTimer()
-  }
-
-  const onTouchEnd = (evt: NativeSyntheticEvent<TouchEvent>) => {
-    bindtouchend && bindtouchend(evt)
-    if (disabled) return
-    setStayTimer()
-  }
-
   const handleFormTypeFn = () => {
     if (formType === 'submit') {
       submitFn && submitFn()
@@ -418,8 +380,6 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
       },
       layoutProps,
       {
-        bindtouchstart: (bindtouchstart || !disabled) && onTouchStart,
-        bindtouchend: (bindtouchend || !disabled) && onTouchEnd,
         bindtap: !disabled && onTap
       }
     ),
@@ -442,7 +402,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     }
   )
 
-  return createElement(View, innerProps, loading && createElement(Loading, { alone: !children }),
+  const baseButton = createElement(View, innerProps, loading && createElement(Loading, { alone: !children }),
     wrapChildren(
       props,
       {
@@ -453,6 +413,10 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
       }
     )
   )
+
+  return enableHoverStyle
+    ? createElement(GestureDetector, { gesture }, baseButton)
+    : baseButton
 })
 
 Button.displayName = 'MpxButton'