@mpxjs/webpack-plugin 2.9.70 → 2.9.71

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

@@ -10,9 +10,10 @@ import useInnerProps from './getInnerListeners';
 import Animated from 'react-native-reanimated';
 import useAnimationHooks from './useAnimationHooks';
 import useNodesRef from './useNodesRef';
-import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject } from './utils';
+import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHover } from './utils';
 import { error } from '@mpxjs/utils';
 import LinearGradient from 'react-native-linear-gradient';
+import { GestureDetector } from 'react-native-gesture-handler';
 const linearMap = new Map([
     ['top', 0],
     ['bottom', 180],
@@ -542,7 +543,6 @@ 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 [isHover, setIsHover] = useState(false);
     // 默认样式
     const defaultStyle = style.display === 'flex'
         ? {
@@ -552,6 +552,8 @@ const _View = forwardRef((viewProps, ref) => {
             flexWrap: 'nowrap'
         }
         : {};
+    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, {
         enableVar,
@@ -570,60 +572,17 @@ const _View = forwardRef((viewProps, ref) => {
     useNodesRef(props, ref, nodeRef, {
         style: normalStyle
     });
-    const dataRef = useRef({});
-    useEffect(() => {
-        return () => {
-            dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
-            dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer);
-        };
-    }, []);
-    const setStartTimer = () => {
-        dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
-        dataRef.current.startTimer = setTimeout(() => {
-            setIsHover(true);
-        }, +hoverStartTime);
-    };
-    const setStayTimer = () => {
-        dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer);
-        dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
-        dataRef.current.stayTimer = setTimeout(() => {
-            setIsHover(false);
-        }, +hoverStayTime);
-    };
-    function onTouchStart(e) {
-        const { bindtouchstart } = props;
-        bindtouchstart && bindtouchstart(e);
-        setStartTimer();
-    }
-    function onTouchEnd(e) {
-        const { bindtouchend } = props;
-        bindtouchend && bindtouchend(e);
-        setStayTimer();
-    }
     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,
-            // eslint-disable-next-line react-hooks/rules-of-hooks
-            useAnimationHooks({
-                animation,
-                style: viewStyle
-            })]
-        : viewStyle;
+    const { enableStyleAnimation, animationStyle } = useAnimationHooks({
+        enableAnimation,
+        animation,
+        style: viewStyle
+    });
     const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: finalStyle
-    }, layoutProps, hoverStyle
-        ? {
-            bindtouchstart: onTouchStart,
-            bindtouchend: onTouchEnd
-        }
-        : {}), [
+        style: enableStyleAnimation ? [viewStyle, animationStyle] : viewStyle
+    }, layoutProps), [
         'hover-start-time',
         'hover-stay-time',
         'hover-style',
@@ -641,9 +600,12 @@ const _View = forwardRef((viewProps, ref) => {
         innerStyle,
         enableFastImage
     });
-    return enableAnimation
+    const BaseComponent = enableStyleAnimation
         ? createElement(Animated.View, innerProps, childNode)
         : createElement(View, innerProps, childNode);
+    return enableHover
+        ? createElement(GestureDetector, { gesture: gesture }, BaseComponent)
+        : BaseComponent;
 });
 _View.displayName = 'MpxView';
 export default _View;

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

@@ -37,15 +37,14 @@ export const createFaces = (itemHeight, visibleCount) => {
     const getOpacity = (index) => {
         const map = {
             0: 0,
-            1: 0.2,
-            2: 0.35,
-            3: 0.45,
-            4: 0.5
+            1: 0.8,
+            2: 0.9
         };
-        return map[index] ?? Math.min(1, map[4] + index * 0.5);
+        return map[index] ?? Math.min(1, map[2] + index * 0.05);
     };
     const degrees = getDegreesRelativeCenter();
     const [screenHeight, offsets] = getScreenHeightsAndOffsets(degrees);
+    const scales = [0.973, 0.9, 0.8];
     return [
         // top items
         ...degrees
@@ -55,12 +54,13 @@ export const createFaces = (itemHeight, visibleCount) => {
                 deg: degree,
                 opacity: getOpacity(degrees.length - 1 - index),
                 offsetY: -1 * offsets[index],
+                scale: scales[index],
                 screenHeight: screenHeight[index]
             };
         })
             .reverse(),
         // center item
-        { index: 0, deg: 0, opacity: 1, offsetY: 0, screenHeight: itemHeight },
+        { index: 0, deg: 0, opacity: 1, offsetY: 0, scale: 1, screenHeight: itemHeight },
         // bottom items
         ...degrees.map((degree, index) => {
             return {
@@ -68,6 +68,7 @@ export const createFaces = (itemHeight, visibleCount) => {
                 deg: -1 * degree,
                 opacity: getOpacity(degrees.length - 1 - index),
                 offsetY: offsets[index],
+                scale: scales[index],
                 screenHeight: screenHeight[index]
             };
         })

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

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+export const PickerViewColumnAnimationContext = createContext(undefined);
+export const usePickerViewColumnAnimationContext = () => {
+    const value = useContext(PickerViewColumnAnimationContext);
+    if (value === undefined) {
+        throw new Error('usePickerViewColumnAnimationContext must be called from within PickerViewColumnAnimationContext.Provider!');
+    }
+    return value;
+};
+export const PickerViewStyleContext = createContext(undefined);
+export const usePickerViewStyleContext = () => {
+    const value = useContext(PickerViewStyleContext);
+    return value;
+};

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+const _PickerViewIndicator = ({ itemHeight, indicatorItemStyle, indicatorContainerStyle }) => {
+    return (<View style={[styles.indicatorContainer, indicatorContainerStyle]} pointerEvents={'none'}>
+      <View style={[styles.selection, { height: itemHeight }, indicatorItemStyle]}/>
+    </View>);
+};
+const styles = StyleSheet.create({
+    indicatorContainer: {
+        ...StyleSheet.absoluteFillObject,
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 200
+    },
+    selection: {
+        borderTopWidth: 1,
+        borderBottomWidth: 1,
+        borderColor: 'rgba(0, 0, 0, 0.05)',
+        alignSelf: 'stretch'
+    }
+});
+_PickerViewIndicator.displayName = 'MpxPickerViewIndicator';
+export default _PickerViewIndicator;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+const _PickerViewMask = ({ itemHeight, maskContainerStyle }) => {
+    return (<View style={[styles.maskContainer, maskContainerStyle]} pointerEvents={'none'}>
+      <LinearGradient colors={['rgba(255,255,255,1)', 'rgba(255,255,255,0.5)']} style={{ flex: 1 }}/>
+      <View style={{ height: itemHeight }}/>
+      <LinearGradient colors={['rgba(255,255,255,0.5)', 'rgba(255,255,255,1)']} style={{ flex: 1 }}/>
+    </View>);
+};
+const styles = StyleSheet.create({
+    maskContainer: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: 100
+    }
+});
+_PickerViewMask.displayName = 'MpxPickerViewMask';
+export default _PickerViewMask;

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,19 +133,29 @@ 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 (!enableAnimationRef.current)
+        return { enableStyleAnimation: false };
     const originalStyle = formatStyle(style);
     // id 标识
     const id = animation?.id || -1;
     // 有动画样式的 style key
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const animatedStyleKeys = useSharedValue([]);
     // 记录动画key的style样式值 没有的话设置为false
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const animatedKeys = useRef({});
     // const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: boolean|number|string})
     // ** 全量 style prop sharedValue
     // 不能做增量的原因：
     // 1 尝试用 useRef，但 useAnimatedStyle 访问后的 ref 不能在增加新的值，被冻结
     // 2 尝试用 useSharedValue，因为实际触发的 style prop 需要是 sharedValue 才能驱动动画，若外层 shareValMap 也是 sharedValue，动画无法驱动。
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const shareValMap = useMemo(() => {
         return Object.keys(InitialValue).reduce((valMap, key) => {
             const defaultVal = getInitialVal(key, isTransform(key));
@@ -153,6 +164,7 @@ export default function useAnimationHooks(props) {
         }, {});
     }, []);
     // ** 获取动画样式prop & 驱动动画
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
         if (id === -1)
             return;
@@ -174,6 +186,7 @@ export default function useAnimationHooks(props) {
     //   })
     // }, [style])
     // ** 清空动画
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
         return () => {
             Object.values(shareValMap).forEach((value) => {
@@ -306,7 +319,8 @@ export default function useAnimationHooks(props) {
         }, {});
     }
     // ** 生成动画样式
-    return useAnimatedStyle(() => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const animationStyle = useAnimatedStyle(() => {
         // console.info(`useAnimatedStyle styles=`, originalStyle)
         return animatedStyleKeys.value.reduce((styles, key) => {
             // console.info('getAnimationStyles', key, shareValMap[key].value)
@@ -325,4 +339,8 @@ export default function useAnimationHooks(props) {
             return styles;
         }, {});
     });
+    return {
+        enableStyleAnimation: enableAnimationRef.current,
+        animationStyle
+    };
 }

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

@@ -1,10 +1,13 @@
 import { useEffect, useCallback, useMemo, useRef, isValidElement, useContext, useState, Children, cloneElement } from 'react';
 import { Image } from 'react-native';
-import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils';
-import { VarContext } from './context';
+import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils';
+import { VarContext, ScrollViewContext } from './context';
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser';
 import { initialWindowMetrics } from 'react-native-safe-area-context';
+import { useNavigation } from '@react-navigation/native';
 import FastImage from '@d11/react-native-fast-image';
+import { runOnJS } from 'react-native-reanimated';
+import { Gesture } from 'react-native-gesture-handler';
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/;
 export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/;
 export const URL_REGEX = /^\s*url\(["']?(.*?)["']?\)\s*$/;
@@ -15,6 +18,8 @@ export const DEFAULT_FONT_SIZE = 16;
 export const HIDDEN_STYLE = {
     opacity: 0
 };
+export const isIOS = __mpx_mode__ === 'ios';
+export const isAndroid = __mpx_mode__ === 'android';
 const varDecRegExp = /^--/;
 const varUseRegExp = /var\(/;
 const unoVarDecRegExp = /^--un-/;
@@ -27,8 +32,7 @@ const safeAreaInsetMap = {
     'safe-area-inset-bottom': 'bottom',
     'safe-area-inset-left': 'left'
 };
-function getSafeAreaInset(name) {
-    const navigation = getFocusedNavigation();
+function getSafeAreaInset(name, navigation) {
     const insets = extendObject({}, initialWindowMetrics?.insets, navigation?.insets);
     return insets[safeAreaInsetMap[name]];
 }
@@ -194,7 +198,7 @@ function transformVar(styleObj, varKeyPaths, varContext) {
         });
     });
 }
-function transformEnv(styleObj, envKeyPaths) {
+function transformEnv(styleObj, envKeyPaths, navigation) {
     envKeyPaths.forEach((envKeyPath) => {
         setStyle(styleObj, envKeyPath, ({ target, key, value }) => {
             const parsed = parseFunc(value, 'env');
@@ -202,7 +206,7 @@ function transformEnv(styleObj, envKeyPaths) {
             parsed.forEach(({ start, end, args }) => {
                 const name = args[0];
                 const fallback = args[1] || '';
-                const value = '' + (getSafeAreaInset(name) ?? global.__formatValue(fallback));
+                const value = '' + (getSafeAreaInset(name, navigation) ?? global.__formatValue(fallback));
                 replaced.replace(start, end - 1, value);
             });
             target[key] = global.__formatValue(replaced.source());
@@ -254,6 +258,7 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
     const envKeyPaths = [];
     const [width, setWidth] = useState(0);
     const [height, setHeight] = useState(0);
+    const navigation = useNavigation();
     function varVisitor({ key, value, keyPath }) {
         if (keyPath.length === 1) {
             if (unoVarDecRegExp.test(key)) {
@@ -341,7 +346,7 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
             parentFontSize
         };
         // apply env
-        transformEnv(normalStyle, envKeyPaths);
+        transformEnv(normalStyle, envKeyPaths, navigation);
         // apply percent
         transformPercent(normalStyle, percentKeyPaths, percentConfig);
         // apply calc
@@ -476,13 +481,14 @@ export function wrapChildren(props = {}, { hasVarDec, varContext, textStyle, tex
 export const debounce = (func, delay) => {
     let timer;
     const wrapper = (...args) => {
-        clearTimeout(timer);
+        timer && clearTimeout(timer);
         timer = setTimeout(() => {
             func(...args);
         }, delay);
     };
     wrapper.clear = () => {
-        clearTimeout(timer);
+        timer && clearTimeout(timer);
+        timer = null;
     };
     return wrapper;
 };
@@ -495,12 +501,12 @@ export const useStableCallback = (callback) => {
     ref.current = callback;
     return useCallback((...args) => ref.current?.(...args), []);
 };
-export const usePrevious = (value) => {
+export function usePrevious(value) {
     const ref = useRef();
     const prev = ref.current;
     ref.current = value;
     return prev;
-};
+}
 export function flatGesture(gestures = []) {
     return (gestures && gestures.flatMap((gesture) => {
         if (gesture && gesture.nodeRefs) {
@@ -529,3 +535,60 @@ export function pickStyle(styleObj = {}, pickedKeys, callback) {
         return acc;
     }, {});
 }
+export function useHover({ enableHover, hoverStartTime, hoverStayTime, disabled }) {
+    const enableHoverRef = useRef(enableHover);
+    if (enableHoverRef.current !== enableHover) {
+        error('[Mpx runtime error]: hover-class use should be stable in the component lifecycle.');
+    }
+    if (!enableHoverRef.current)
+        return { isHover: false };
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const gestureRef = useContext(ScrollViewContext).gestureRef;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [isHover, setIsHover] = useState(false);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const dataRef = useRef({});
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+        return () => {
+            dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
+            dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer);
+        };
+    }, []);
+    const setStartTimer = () => {
+        if (disabled)
+            return;
+        dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
+        dataRef.current.startTimer = setTimeout(() => {
+            setIsHover(true);
+        }, +hoverStartTime);
+    };
+    const setStayTimer = () => {
+        if (disabled)
+            return;
+        dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer);
+        dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
+        dataRef.current.stayTimer = setTimeout(() => {
+            setIsHover(false);
+        }, +hoverStayTime);
+    };
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const gesture = useMemo(() => {
+        return Gesture.Pan()
+            .onTouchesDown(() => {
+            'worklet';
+            runOnJS(setStartTimer)();
+        })
+            .onTouchesUp(() => {
+            'worklet';
+            runOnJS(setStayTimer)();
+        });
+    }, []);
+    if (gestureRef) {
+        gesture.simultaneousWithExternalGesture(gestureRef);
+    }
+    return {
+        isHover,
+        gesture
+    };
+}

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

@@ -1,5 +1,6 @@
 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,15 +11,22 @@ 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 { id } = props
@@ -49,24 +57,24 @@ const getTouchEvent = (
     target,
     detail: {
       x: pageX,
-      y: pageY
+      y: pageY - navigationY
     },
     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) => {
       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,
@@ -105,7 +113,8 @@ function handleEmitEvent (
   type: string,
   oe: NativeTouchEvent,
   propsRef: Record<string, any>,
-  config: UseInnerPropsConfig
+  config: UseInnerPropsConfig,
+  navigation: Navigation
 ) {
   events.forEach((event) => {
     if (propsRef.current[event]) {
@@ -114,7 +123,7 @@ function handleEmitEvent (
         oe.stopPropagation()
       }
       propsRef.current[event](
-        getTouchEvent(type, oe, propsRef.current, config)
+        getTouchEvent(type, oe, propsRef.current, config, navigation)
       )
     }
   })
@@ -129,14 +138,14 @@ function checkIsNeedPress (e: NativeTouchEvent, type: 'bubble' | 'capture', ref:
     Math.abs(currentPageX - tapDetailInfo.x) > 3 ||
         Math.abs(currentPageY - tapDetailInfo.y) > 3
   ) {
-    ref.current!.needPress[type] = false
+    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) {
+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']
@@ -149,7 +158,7 @@ function handleTouchstart (e: NativeTouchEvent, type: 'bubble' | 'capture', ref:
     'capture-bindlongpress'
   ]
   ref.current!.startTimer[type] = null
-  ref.current!.needPress[type] = true
+  globalEventState.needPress = true
   const nativeEvent = e.nativeEvent
   ref.current!.mpxPressInfo.detail = {
     x: nativeEvent.changedTouches[0].pageX,
@@ -159,7 +168,7 @@ function handleTouchstart (e: NativeTouchEvent, type: 'bubble' | 'capture', ref:
         type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
   const currentPressEvent =
         type === 'bubble' ? bubblePressEvent : capturePressEvent
-  handleEmitEvent(currentTouchEvent, 'touchstart', e, propsRef, config)
+  handleEmitEvent(currentTouchEvent, 'touchstart', e, propsRef, config, navigation)
   const {
     catchlongpress,
     bindlongpress,
@@ -173,13 +182,14 @@ function handleTouchstart (e: NativeTouchEvent, type: 'bubble' | 'capture', ref:
         captureBindlongpress
   ) {
     ref.current!.startTimer[type] = setTimeout(() => {
-      ref.current!.needPress[type] = false
-      handleEmitEvent(currentPressEvent, 'longpress', e, propsRef, config)
+      // 只要触发过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) {
+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',
@@ -187,11 +197,11 @@ function handleTouchmove (e: NativeTouchEvent, type: 'bubble' | 'capture', ref:
   ]
   const currentTouchEvent =
         type === 'bubble' ? bubbleTouchEvent : captureTouchEvent
-  handleEmitEvent(currentTouchEvent, 'touchmove', e, propsRef, config)
+  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) {
+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']
@@ -208,19 +218,22 @@ function handleTouchend (e: NativeTouchEvent, type: 'bubble' | 'capture', ref: R
   ref.current!.startTimer[type] &&
         clearTimeout(ref.current!.startTimer[type] as SetTimeoutReturnType)
   ref.current!.startTimer[type] = null
-  handleEmitEvent(currentTouchEvent, 'touchend', e, propsRef, config)
-  if (ref.current!.needPress[type]) {
+  handleEmitEvent(currentTouchEvent, 'touchend', e, propsRef, config, navigation)
+  if (globalEventState.needPress) {
     if (type === 'bubble' && config.disableTap) {
       return
     }
-    handleEmitEvent(currentTapEvent, 'tap', e, propsRef, config)
+    handleEmitEvent(currentTapEvent, 'tap', e, propsRef, config, navigation)
   }
 }
 
 function handleTouchcancel (
   e: NativeTouchEvent,
   type: 'bubble' | 'capture',
-  ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig
+  ref: RefObject<InnerRef>,
+  propsRef: Record<string, any>,
+  config: UseInnerPropsConfig,
+  navigation: Navigation
 ) {
   const bubbleTouchEvent = ['catchtouchcancel', 'bindtouchcancel']
   const captureTouchEvent = [
@@ -232,11 +245,11 @@ function handleTouchcancel (
   ref.current!.startTimer[type] &&
         clearTimeout(ref.current!.startTimer[type] as SetTimeoutReturnType)
   ref.current!.startTimer[type] = null
-  handleEmitEvent(currentTouchEvent, 'touchcancel', e, propsRef, config)
+  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) => {
+  return (e: NativeTouchEvent, ref: RefObject<InnerRef>, propsRef: Record<string, any>, config: UseInnerPropsConfig, navigation: Navigation) => {
     const handlerMap = {
       onTouchStart: handleTouchstart,
       onTouchMove: handleTouchmove,
@@ -246,7 +259,7 @@ function createTouchEventHandler (eventName: 'onTouchStart'|'onTouchMove'|'onTou
 
     const handler = handlerMap[eventName]
     if (handler) {
-      handler(e, type, ref, propsRef, config)
+      handler(e, type, ref, propsRef, config, navigation)
     }
   }
 }
@@ -273,10 +286,6 @@ const useInnerProps = (
       bubble: null,
       capture: null
     },
-    needPress: {
-      bubble: false,
-      capture: false
-    },
     mpxPressInfo: {
       detail: {
         x: 0,
@@ -291,6 +300,8 @@ const useInnerProps = (
     layoutRef: { current: {} },
     disableTap: false
   }
+  const navigation = useNavigation()
+
   const removeProps = [
     'children',
     'enable-background',
@@ -332,7 +343,7 @@ const useInnerProps = (
     touchEventList.forEach((item) => {
       if (finalEventKeys.includes(item.eventName)) {
         events[item.eventName] = (e: NativeTouchEvent) =>
-          item.handler(e, ref, propsRef, config)
+          item.handler(e, ref, propsRef, config, navigation)
       }
     })