@mpxjs/webpack-plugin 2.9.70-alpha.0 → 2.9.71

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

@@ -1,5 +1,6 @@
-import { useRef } from 'react'
+import { useRef, useMemo, RefObject } 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 {
@@ -10,34 +11,42 @@ import {
   InnerRef,
   SetTimeoutReturnType,
   LayoutRef,
-  NativeTouchEvent
+  NativeTouchEvent,
+  Navigation
 } from './types/getInnerListeners'
 
+const globalEventState = {
+  needPress: true
+}
+
 const getTouchEvent = (
   type: string,
   event: NativeTouchEvent,
   props: Props,
-  config: UseInnerPropsConfig
+  config: UseInnerPropsConfig,
+  navigation: Navigation
 ) => {
+  const { y: navigationY = 0 } = navigation?.layout || {}
   const nativeEvent = event.nativeEvent
-  const {
-    timestamp,
-    pageX,
-    pageY,
-    touches,
-    changedTouches
-  } = nativeEvent
+  const { timestamp, pageX, pageY, touches, changedTouches } = nativeEvent
   const { id } = props
   const { layoutRef } = config
 
-  const currentTarget = extendObject(
+  const currentTarget = extendObject({}, event.currentTarget, {
+    id: id || '',
+    dataset: collectDataset(props),
+    offsetLeft: layoutRef?.current?.offsetLeft || 0,
+    offsetTop: layoutRef?.current?.offsetTop || 0
+  })
+
+  const pendingProps = (event as any)._targetInst?.pendingProps || {}
+
+  const target = extendObject(
     {},
-    event.currentTarget,
+    event.target,
     {
-      id: id || '',
-      dataset: collectDataset(props),
-      offsetLeft: layoutRef?.current?.offsetLeft || 0,
-      offsetTop: layoutRef?.current?.offsetTop || 0
+      id: pendingProps.parentId || pendingProps.nativeID || '',
+      dataset: collectDataset(pendingProps)
     }
   )
 
@@ -45,26 +54,27 @@ const getTouchEvent = (
     type,
     timeStamp: timestamp,
     currentTarget,
+    target,
     detail: {
       x: pageX,
-      y: pageY
+      y: pageY - navigationY
     },
-    touches: touches.map(item => {
+    touches: touches.map((item) => {
       return {
         identifier: item.identifier,
         pageX: item.pageX,
-        pageY: item.pageY,
-        clientX: item.locationX,
-        clientY: item.locationY
+        pageY: item.pageY - navigationY,
+        clientX: item.pageX,
+        clientY: item.pageY - navigationY
       }
     }),
-    changedTouches: changedTouches.map(item => {
+    changedTouches: changedTouches.map((item) => {
       return {
         identifier: item.identifier,
         pageX: item.pageX,
-        pageY: item.pageY,
-        clientX: item.locationX,
-        clientY: item.locationY
+        pageY: item.pageY - navigationY,
+        clientX: item.pageX,
+        clientY: item.pageY - navigationY
       }
     }),
     persist: event.persist,
@@ -76,7 +86,10 @@ const getTouchEvent = (
 export const getCustomEvent = (
   type = '',
   oe: any = {},
-  { detail = {}, layoutRef }: { detail?: Record<string, unknown>; layoutRef: LayoutRef },
+  {
+    detail = {},
+    layoutRef
+  }: { detail?: Record<string, unknown>; layoutRef?: LayoutRef },
   props: Props = {}
 ) => {
   const targetInfo = extendObject({}, oe.target, {
@@ -95,6 +108,173 @@ export const getCustomEvent = (
   })
 }
 
+function handleEmitEvent (
+  events: string[],
+  type: string,
+  oe: NativeTouchEvent,
+  propsRef: Record<string, any>,
+  config: UseInnerPropsConfig,
+  navigation: Navigation
+) {
+  events.forEach((event) => {
+    if (propsRef.current[event]) {
+      const match = /^(catch|capture-catch):?(.*?)(?:\.(.*))?$/.exec(event)
+      if (match) {
+        oe.stopPropagation()
+      }
+      propsRef.current[event](
+        getTouchEvent(type, oe, propsRef.current, config, navigation)
+      )
+    }
+  })
+}
+
+function checkIsNeedPress (e: NativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>) {
+  const tapDetailInfo = ref.current!.mpxPressInfo.detail || { x: 0, y: 0 }
+  const nativeEvent = e.nativeEvent
+  const currentPageX = nativeEvent.changedTouches[0].pageX
+  const currentPageY = nativeEvent.changedTouches[0].pageY
+  if (
+    Math.abs(currentPageX - tapDetailInfo.x) > 3 ||
+        Math.abs(currentPageY - tapDetailInfo.y) > 3
+  ) {
+    globalEventState.needPress = false
+    ref.current!.startTimer[type] &&
+          clearTimeout(ref.current!.startTimer[type] as SetTimeoutReturnType)
+    ref.current!.startTimer[type] = null
+  }
+}
+
+function handleTouchstart (e: NativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig, navigation: Navigation) {
+  e.persist()
+  const bubbleTouchEvent = ['catchtouchstart', 'bindtouchstart']
+  const bubblePressEvent = ['catchlongpress', 'bindlongpress']
+  const captureTouchEvent = [
+    'capture-catchtouchstart',
+    'capture-bindtouchstart'
+  ]
+  const capturePressEvent = [
+    'capture-catchlongpress',
+    'capture-bindlongpress'
+  ]
+  ref.current!.startTimer[type] = null
+  globalEventState.needPress = true
+  const nativeEvent = e.nativeEvent
+  ref.current!.mpxPressInfo.detail = {
+    x: nativeEvent.changedTouches[0].pageX,
+    y: nativeEvent.changedTouches[0].pageY
+  }
+  const currentTouchEvent =
+        type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
+  const currentPressEvent =
+        type === 'bubble' ? bubblePressEvent : capturePressEvent
+  handleEmitEvent(currentTouchEvent, 'touchstart', e, propsRef, config, navigation)
+  const {
+    catchlongpress,
+    bindlongpress,
+    'capture-catchlongpress': captureCatchlongpress,
+    'capture-bindlongpress': captureBindlongpress
+  } = propsRef.current
+  if (
+    catchlongpress ||
+        bindlongpress ||
+        captureCatchlongpress ||
+        captureBindlongpress
+  ) {
+    ref.current!.startTimer[type] = setTimeout(() => {
+      // 只要触发过longpress, 全局就不再触发tap
+      globalEventState.needPress = false
+      handleEmitEvent(currentPressEvent, 'longpress', e, propsRef, config, navigation)
+    }, 350)
+  }
+}
+
+function handleTouchmove (e: NativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig, navigation: Navigation) {
+  const bubbleTouchEvent = ['catchtouchmove', 'bindtouchmove']
+  const captureTouchEvent = [
+    'capture-catchtouchmove',
+    'capture-bindtouchmove'
+  ]
+  const currentTouchEvent =
+        type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
+  handleEmitEvent(currentTouchEvent, 'touchmove', e, propsRef, config, navigation)
+  checkIsNeedPress(e, type, ref)
+}
+
+function handleTouchend (e: NativeTouchEvent, type: 'bubble' | 'capture', ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig, navigation: Navigation) {
+  // move event may not be triggered
+  checkIsNeedPress(e, type, ref)
+  const bubbleTouchEvent = ['catchtouchend', 'bindtouchend']
+  const bubbleTapEvent = ['catchtap', 'bindtap']
+  const captureTouchEvent = [
+    'capture-catchtouchend',
+    'capture-bindtouchend'
+  ]
+  const captureTapEvent = ['capture-catchtap', 'capture-bindtap']
+  const currentTouchEvent =
+        type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
+  const currentTapEvent =
+        type === 'bubble' ? bubbleTapEvent : captureTapEvent
+  ref.current!.startTimer[type] &&
+        clearTimeout(ref.current!.startTimer[type] as SetTimeoutReturnType)
+  ref.current!.startTimer[type] = null
+  handleEmitEvent(currentTouchEvent, 'touchend', e, propsRef, config, navigation)
+  if (globalEventState.needPress) {
+    if (type === 'bubble' && config.disableTap) {
+      return
+    }
+    handleEmitEvent(currentTapEvent, 'tap', e, propsRef, config, navigation)
+  }
+}
+
+function handleTouchcancel (
+  e: NativeTouchEvent,
+  type: 'bubble' | 'capture',
+  ref: RefObject<InnerRef>,
+  propsRef: Record<string, any>,
+  config: UseInnerPropsConfig,
+  navigation: Navigation
+) {
+  const bubbleTouchEvent = ['catchtouchcancel', 'bindtouchcancel']
+  const captureTouchEvent = [
+    'capture-catchtouchcancel',
+    'capture-bindtouchcancel'
+  ]
+  const currentTouchEvent =
+        type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
+  ref.current!.startTimer[type] &&
+        clearTimeout(ref.current!.startTimer[type] as SetTimeoutReturnType)
+  ref.current!.startTimer[type] = null
+  handleEmitEvent(currentTouchEvent, 'touchcancel', e, propsRef, config, navigation)
+}
+
+function createTouchEventHandler (eventName: 'onTouchStart'|'onTouchMove'|'onTouchEnd'|'onTouchCancel', type: 'bubble' | 'capture') {
+  return (e: NativeTouchEvent, ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig, navigation: Navigation) => {
+    const handlerMap = {
+      onTouchStart: handleTouchstart,
+      onTouchMove: handleTouchmove,
+      onTouchEnd: handleTouchend,
+      onTouchCancel: handleTouchcancel
+    }
+
+    const handler = handlerMap[eventName]
+    if (handler) {
+      handler(e, type, ref, propsRef, config, navigation)
+    }
+  }
+}
+
+const touchEventList = [
+  { eventName: 'onTouchStart', handler: createTouchEventHandler('onTouchStart', 'bubble') },
+  { eventName: 'onTouchMove', handler: createTouchEventHandler('onTouchMove', 'bubble') },
+  { eventName: 'onTouchEnd', handler: createTouchEventHandler('onTouchEnd', 'bubble') },
+  { eventName: 'onTouchCancel', handler: createTouchEventHandler('onTouchCancel', 'bubble') },
+  { eventName: 'onTouchStartCapture', handler: createTouchEventHandler('onTouchStart', 'capture') },
+  { eventName: 'onTouchMoveCapture', handler: createTouchEventHandler('onTouchMove', 'capture') },
+  { eventName: 'onTouchEndCapture', handler: createTouchEventHandler('onTouchEnd', 'capture') },
+  { eventName: 'onTouchCancelCapture', handler: createTouchEventHandler('onTouchCancel', 'capture') }
+]
+
 const useInnerProps = (
   props: Props = {},
   additionalProps: AdditionalProps = {},
@@ -106,10 +286,6 @@ const useInnerProps = (
       bubble: null,
       capture: null
     },
-    needPress: {
-      bubble: false,
-      capture: false
-    },
     mpxPressInfo: {
       detail: {
         x: 0,
@@ -120,7 +296,12 @@ const useInnerProps = (
 
   const propsRef = useRef<Record<string, any>>({})
   const eventConfig: { [key: string]: string[] } = {}
-  const config = rawConfig || { layoutRef: { current: {} }, disableTouch: false, disableTap: false }
+  const config = rawConfig || {
+    layoutRef: { current: {} },
+    disableTap: false
+  }
+  const navigation = useNavigation()
+
   const removeProps = [
     'children',
     'enable-background',
@@ -135,166 +316,39 @@ const useInnerProps = (
 
   propsRef.current = extendObject({}, props, additionalProps)
 
+  let hashEventKey = ''
+  const rawEventKeys: Array<string> = []
+
   for (const key in eventConfigMap) {
     if (hasOwn(propsRef.current, key)) {
-      eventConfig[key] = eventConfigMap[key]
-    }
-  }
-
-  if (!(Object.keys(eventConfig).length) || config.disableTouch) {
-    return omit(propsRef.current, removeProps)
-  }
-
-  function handleEmitEvent (
-    events: string[],
-    type: string,
-    oe: NativeTouchEvent
-  ) {
-    events.forEach(event => {
-      if (propsRef.current[event]) {
-        const match = /^(catch|capture-catch):?(.*?)(?:\.(.*))?$/.exec(event)
-        if (match) {
-          oe.stopPropagation()
-        }
-        propsRef.current[event](getTouchEvent(type, oe, propsRef.current, config))
-      }
-    })
-  }
-
-  function checkIsNeedPress (e: NativeTouchEvent, type: 'bubble' | 'capture') {
-    const tapDetailInfo = ref.current.mpxPressInfo.detail || { x: 0, y: 0 }
-    const nativeEvent = e.nativeEvent
-    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) {
-      ref.current.needPress[type] = false
-      ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type] as SetTimeoutReturnType)
-      ref.current.startTimer[type] = null
+      eventConfig[key] = eventConfigMap[key].events
+      hashEventKey = hashEventKey + eventConfigMap[key].bitFlag
+      rawEventKeys.push(key)
     }
   }
 
-  function handleTouchstart (e: NativeTouchEvent, type: 'bubble' | 'capture') {
-    e.persist()
-    const bubbleTouchEvent = ['catchtouchstart', 'bindtouchstart']
-    const bubblePressEvent = ['catchlongpress', 'bindlongpress']
-    const captureTouchEvent = ['capture-catchtouchstart', 'capture-bindtouchstart']
-    const capturePressEvent = ['capture-catchlongpress', 'capture-bindlongpress']
-    ref.current.startTimer[type] = null
-    ref.current.needPress[type] = true
-    const nativeEvent = e.nativeEvent
-    ref.current.mpxPressInfo.detail = {
-      x: nativeEvent.changedTouches[0].pageX,
-      y: nativeEvent.changedTouches[0].pageY
-    }
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
-    const currentPressEvent = type === 'bubble' ? bubblePressEvent : capturePressEvent
-    handleEmitEvent(currentTouchEvent, 'touchstart', e)
-    const { catchlongpress, bindlongpress, 'capture-catchlongpress': captureCatchlongpress, 'capture-bindlongpress': captureBindlongpress } = propsRef.current
-    if (catchlongpress || bindlongpress || captureCatchlongpress || captureBindlongpress) {
-      ref.current.startTimer[type] = setTimeout(() => {
-        ref.current.needPress[type] = false
-        handleEmitEvent(currentPressEvent, 'longpress', e)
-      }, 350)
+  const events = useMemo(() => {
+    if (!rawEventKeys.length) {
+      return {}
     }
-  }
-
-  function handleTouchmove (e: NativeTouchEvent, type: 'bubble' | 'capture') {
-    const bubbleTouchEvent = ['catchtouchmove', 'bindtouchmove']
-    const captureTouchEvent = ['capture-catchtouchmove', 'capture-bindtouchmove']
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
-    handleEmitEvent(currentTouchEvent, 'touchmove', e)
-    checkIsNeedPress(e, type)
-  }
-
-  function handleTouchend (e: NativeTouchEvent, type: 'bubble' | 'capture') {
-    // move event may not be triggered
-    checkIsNeedPress(e, type)
-    const bubbleTouchEvent = ['catchtouchend', 'bindtouchend']
-    const bubbleTapEvent = ['catchtap', 'bindtap']
-    const captureTouchEvent = ['capture-catchtouchend', 'capture-bindtouchend']
-    const captureTapEvent = ['capture-catchtap', 'capture-bindtap']
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
-    const currentTapEvent = type === 'bubble' ? bubbleTapEvent : captureTapEvent
-    ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type] as SetTimeoutReturnType)
-    ref.current.startTimer[type] = null
-    handleEmitEvent(currentTouchEvent, 'touchend', e)
-    if (ref.current.needPress[type]) {
-      if (type === 'bubble' && config.disableTap) {
-        return
+    const transformedEventKeys = rawEventKeys.reduce((acc: string[], key) => {
+      if (propsRef.current[key]) {
+        return acc.concat(eventConfig[key])
       }
-      handleEmitEvent(currentTapEvent, 'tap', e)
-    }
-  }
-
-  function handleTouchcancel (e: NativeTouchEvent, type: 'bubble' | 'capture') {
-    const bubbleTouchEvent = ['catchtouchcancel', 'bindtouchcancel']
-    const captureTouchEvent = ['capture-catchtouchcancel', 'capture-bindtouchcancel']
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
-    ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type] as SetTimeoutReturnType)
-    ref.current.startTimer[type] = null
-    handleEmitEvent(currentTouchEvent, 'touchcancel', e)
-  }
+      return acc
+    }, [])
+    const finalEventKeys = [...new Set(transformedEventKeys)]
+    const events: Record<string, (e: NativeTouchEvent) => void> = {}
 
-  const touchEventList = [{
-    eventName: 'onTouchStart',
-    handler: (e: NativeTouchEvent) => {
-      handleTouchstart(e, 'bubble')
-    }
-  }, {
-    eventName: 'onTouchMove',
-    handler: (e: NativeTouchEvent) => {
-      handleTouchmove(e, 'bubble')
-    }
-  }, {
-    eventName: 'onTouchEnd',
-    handler: (e: NativeTouchEvent) => {
-      handleTouchend(e, 'bubble')
-    }
-  }, {
-    eventName: 'onTouchCancel',
-    handler: (e: NativeTouchEvent) => {
-      handleTouchcancel(e, 'bubble')
-    }
-  }, {
-    eventName: 'onTouchStartCapture',
-    handler: (e: NativeTouchEvent) => {
-      handleTouchstart(e, 'capture')
-    }
-  }, {
-    eventName: 'onTouchMoveCapture',
-    handler: (e: NativeTouchEvent) => {
-      handleTouchmove(e, 'capture')
-    }
-  }, {
-    eventName: 'onTouchEndCapture',
-    handler: (e: NativeTouchEvent) => {
-      handleTouchend(e, 'capture')
-    }
-  }, {
-    eventName: 'onTouchCancelCapture',
-    handler: (e: NativeTouchEvent) => {
-      handleTouchcancel(e, 'capture')
-    }
-  }]
-
-  const events: Record<string, (e: NativeTouchEvent) => void> = {}
-
-  let transformedEventKeys: string[] = []
-  for (const key in eventConfig) {
-    if (propsRef.current[key]) {
-      transformedEventKeys = transformedEventKeys.concat(eventConfig[key])
-    }
-  }
-
-  const finalEventKeys = [...new Set(transformedEventKeys)]
-
-  touchEventList.forEach(item => {
-    if (finalEventKeys.includes(item.eventName)) {
-      events[item.eventName] = item.handler
-    }
-  })
+    touchEventList.forEach((item) => {
+      if (finalEventKeys.includes(item.eventName)) {
+        events[item.eventName] = (e: NativeTouchEvent) =>
+          item.handler(e, ref, propsRef, config, navigation)
+      }
+    })
 
-  const rawEventKeys = Object.keys(eventConfig)
+    return events
+  }, [hashEventKey])
 
   return extendObject(
     {},

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

@@ -34,7 +34,7 @@
  * ✘ bindagreeprivacyauthorization
  * ✔ bindtap
  */
-import { 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, PanGesture } from 'react-native-gesture-handler'
+import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHover } 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,16 @@ 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 enableHover = hoverClass !== 'none'
+  const { isHover, gesture } = useHover({ enableHover, hoverStartTime, hoverStayTime, disabled })
+
   let submitFn: () => void | undefined
   let resetFn: () => void | undefined
 
@@ -233,27 +234,15 @@ 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'
-
   const [color, hoverColor, plainColor, disabledColor] = TypeColorMap[type]
 
-  const normalBackgroundColor = disabled ? disabledColor : applyHoverEffect || loading ? hoverColor : color
+  const normalBackgroundColor = disabled ? disabledColor : isHover || loading ? hoverColor : color
 
   const plainBorderColor = disabled
     ? 'rgba(0, 0, 0, .2)'
-    : applyHoverEffect
+    : isHover
       ? `rgba(${plainColor},.6)`
       : `rgb(${plainColor})`
 
@@ -261,14 +250,14 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
 
   const plainTextColor = disabled
     ? 'rgba(0, 0, 0, .2)'
-    : applyHoverEffect
+    : isHover
       ? `rgba(${plainColor}, .6)`
       : `rgb(${plainColor})`
 
   const normalTextColor =
     type === 'default'
-      ? `rgba(0, 0, 0, ${disabled ? 0.3 : applyHoverEffect || loading ? 0.6 : 1})`
-      : `rgba(255 ,255 ,255 , ${disabled || applyHoverEffect || loading ? 0.6 : 1})`
+      ? `rgba(0, 0, 0, ${disabled ? 0.3 : isHover || loading ? 0.6 : 1})`
+      : `rgba(255 ,255 ,255 , ${disabled || isHover || loading ? 0.6 : 1})`
 
   const viewStyle = {
     borderWidth: 1,
@@ -297,7 +286,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     {},
     defaultStyle,
     style,
-    applyHoverEffect ? hoverStyle : {}
+    isHover ? hoverStyle : {}
   )
 
   const {
@@ -366,34 +355,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 +379,6 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
       },
       layoutProps,
       {
-        bindtouchstart: (bindtouchstart || !disabled) && onTouchStart,
-        bindtouchend: (bindtouchend || !disabled) && onTouchEnd,
         bindtap: !disabled && onTap
       }
     ),
@@ -442,22 +401,21 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     }
   )
 
-  return (
-    <View {...innerProps}>
-      {loading && <Loading alone={!children} />}
+  const baseButton = createElement(View, innerProps, loading && createElement(Loading, { alone: !children }),
+    wrapChildren(
+      props,
       {
-        wrapChildren(
-          props,
-          {
-            hasVarDec,
-            varContext: varContextRef.current,
-            textStyle,
-            textProps
-          }
-        )
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
       }
-    </View>
+    )
   )
+
+  return enableHover
+    ? createElement(GestureDetector, { gesture: gesture as PanGesture }, baseButton)
+    : baseButton
 })
 
 Button.displayName = 'MpxButton'