diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx index 905385b43..291567ea6 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx @@ -18,7 +18,7 @@ * ✔ vtouchmove */ import { useEffect, forwardRef, ReactNode, useContext, useCallback, useRef, useMemo, createElement } from 'react' -import { StyleSheet, NativeSyntheticEvent, View, LayoutChangeEvent } from 'react-native' +import { StyleSheet, View, LayoutChangeEvent } from 'react-native' import useInnerProps, { getCustomEvent } from './getInnerListeners' import useNodesRef, { HandlerRef } from './useNodesRef' import { MovableAreaContext } from './context' @@ -34,6 +34,7 @@ import Animated, { withSpring } from 'react-native-reanimated' import { collectDataset, noop } from '@mpxjs/utils' +import { useNavigation } from '@react-navigation/native' interface MovableViewProps { children: ReactNode; @@ -126,6 +127,8 @@ const _MovableView = forwardRef, MovableViewP setHeight } = useTransformStyle(Object.assign({}, style, styles.container), { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }) + const navigation = useNavigation() + const prevSimultaneousHandlersRef = useRef>(originSimultaneousHandlers || []) const prevWaitForHandlersRef = useRef>(waitFor || []) const gestureSwitch = useRef(false) @@ -333,43 +336,44 @@ const _MovableView = forwardRef, MovableViewP setHeight(height || 0) } nodeRef.current?.measure((x: number, y: number, width: number, height: number) => { - layoutRef.current = { x, y, width, height, offsetLeft: 0, offsetTop: 0 } + const { y: navigationY = 0 } = navigation?.layout || {} + layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft: 0, offsetTop: 0 } resetBoundaryAndCheck({ width, height }) }) props.onLayout && props.onLayout(e) } - const extendEvent = useCallback((e: any, obj?: Record) => { + const extendEvent = useCallback((e: any, type: 'start'|'move'|'end') => { + const { y: navigationY = 0 } = navigation?.layout || {} const touchArr = [e.changedTouches, e.allTouches] touchArr.forEach(touches => { - touches && touches.forEach((item: { absoluteX: number; absoluteY: number; pageX: number; pageY: number }) => { + touches && touches.forEach((item: { absoluteX: number; absoluteY: number; pageX: number; pageY: number ; clientX: number; clientY: number}) => { item.pageX = item.absoluteX - item.pageY = item.absoluteY + item.pageY = item.absoluteY - navigationY + item.clientX = item.absoluteX + item.clientY = item.absoluteY - navigationY }) }) Object.assign(e, { - touches: e.allTouches, - detail: { - x: e.changedTouches[0].absoluteX, - y: e.changedTouches[0].absoluteY - }, + touches: type === 'end' ? [] : e.allTouches, currentTarget: { id: props.id || '', dataset: collectDataset(props), offsetLeft: 0, offsetTop: 0 - } - }, obj) + }, + detail: {} + }) }, []) const triggerStartOnJS = ({ e }: { e: GestureTouchEvent }) => { - extendEvent(e) + extendEvent(e, 'start') bindtouchstart && bindtouchstart(e) catchtouchstart && catchtouchstart(e) } const triggerMoveOnJS = ({ e, hasTouchmove, hasCatchTouchmove, touchEvent }: { e: GestureTouchEvent; hasTouchmove: boolean; hasCatchTouchmove: boolean; touchEvent: string }) => { - extendEvent(e) + extendEvent(e, 'move') if (hasTouchmove) { if (touchEvent === 'htouchmove') { bindhtouchmove && bindhtouchmove(e) @@ -390,7 +394,7 @@ const _MovableView = forwardRef, MovableViewP } const triggerEndOnJS = ({ e }: { e: GestureTouchEvent }) => { - extendEvent(e) + extendEvent(e, 'end') bindtouchend && bindtouchend(e) catchtouchend && catchtouchend(e) }