From e90d06641714be67251101c0f8ee3b676cbd057a Mon Sep 17 00:00:00 2001 From: luyongfang Date: Mon, 23 Dec 2024 17:39:25 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96comment?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/react/mpx-swiper-item.tsx | 5 +- .../runtime/components/react/mpx-swiper.tsx | 59 ++++++++++++------- 2 files changed, 42 insertions(+), 22 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper-item.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper-item.tsx index 07465d3fd..9628b4f3c 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper-item.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper-item.tsx @@ -16,6 +16,7 @@ interface SwiperItemProps { 'parent-height'?: number; children?: ReactNode; style?: Object; + customStyle: []; itemIndex: number; scale: boolean; } @@ -30,6 +31,7 @@ const _SwiperItem = forwardRef, SwiperItemProp 'enable-var': enableVar, 'external-var-context': externalVarContext, style, + customStyle, itemIndex, scale } = props @@ -79,10 +81,11 @@ const _SwiperItem = forwardRef, SwiperItemProp }] } }) + const mergeStyle = [innerStyle, layoutStyle, { width: '100%', height: '100%' }, scale ? itemAnimatedStyle : {}].concat(customStyle) return ( { wrapChildren( diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx index d3e5b135a..436de9912 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx @@ -1,4 +1,4 @@ -import { View, NativeSyntheticEvent, Dimensions, LayoutChangeEvent } from 'react-native' +import { View, NativeSyntheticEvent, LayoutChangeEvent } from 'react-native' import { GestureDetector, Gesture } from 'react-native-gesture-handler' import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS, useAnimatedReaction, cancelAnimation } from 'react-native-reanimated' @@ -100,10 +100,6 @@ const styles: { [key: string]: Object } = { overflow: 'scroll', display: 'flex', justifyContent: 'flex-start' - }, - itemWrap: { - width: '100%', - height: '100%' } } @@ -152,8 +148,6 @@ const SwiperWrapper = forwardRef, SwiperProps>((pr const nodeRef = useRef(null) useNodesRef(props, ref, nodeRef, {}) - // 默认取水平方向的width - const { width } = Dimensions.get('window') // 计算transfrom之类的 const { normalStyle, @@ -172,10 +166,8 @@ const SwiperWrapper = forwardRef, SwiperProps>((pr const { textStyle } = splitStyle(normalStyle) const { textProps } = splitProps(props) const children = Array.isArray(props.children) ? props.children.filter(child => child) : (props.children ? [props.children] : []) - const defaultHeight = (normalStyle?.height || 150) - const defaultWidth = (normalStyle?.width || width || 375) - const initWidth = typeof defaultWidth === 'number' ? defaultWidth - previousMargin - nextMargin : defaultWidth - const initHeight = typeof defaultHeight === 'number' ? defaultHeight - previousMargin - nextMargin : defaultHeight + const initWidth = typeof normalStyle?.width === 'number' ? normalStyle.width - previousMargin - nextMargin : normalStyle.width + const initHeight = typeof normalStyle?.height === 'number' ? normalStyle.height - previousMargin - nextMargin : normalStyle.height const dir = useSharedValue(horizontal === false ? 'y' : 'x') const pstep = dir.value === 'x' ? initWidth : initHeight const initStep: number = isNaN(pstep) ? 0 : pstep @@ -196,7 +188,7 @@ const SwiperWrapper = forwardRef, SwiperProps>((pr const touchfinish = useSharedValue(false) // 用户是否触发了move事件,起点在onStart, 触发move事件才会执行onEnd, 1. 移动一定会触发onStart, onTouchesMove, onEnd 2. 点击未进行操作, 会触发onTouchsUp const isTriggerStart = useSharedValue(false) - // 记录上一次的点击时的绝对定位坐标 + // 记录上一帧的绝对定位坐标 const preAbsolutePos = useSharedValue(0) const timerId = useRef(0 as number | ReturnType) // 用户点击未移动状态下,记录用户上一次操作的transtion 的 direction @@ -255,7 +247,7 @@ const SwiperWrapper = forwardRef, SwiperProps>((pr dots.push() } return ( - + , SwiperProps>((pr function renderItems () { const itemAnimatedStyles = useAnimatedStyle(() => { - const pageStyle: Object = dir.value === 'x' ? { width: step.value, height: '100%' } : { width: '100%', height: step.value } - return pageStyle + return dir.value === 'x' ? { width: step.value, height: '100%' } : { width: '100%', height: step.value } }) let renderChild = children.slice() if (props.circular && totalElements.value > 1) { @@ -293,12 +284,17 @@ const SwiperWrapper = forwardRef, SwiperProps>((pr previousMargin && dir.value === 'x' && (extraStyle.marginLeft = previousMargin) previousMargin && dir.value === 'y' && (extraStyle.marginTop = previousMargin) } - if (index === totalElements.value - 1) { + if (index === totalElements.value - 1 && !props.circular) { nextMargin && dir.value === 'x' && (extraStyle.marginRight = nextMargin) nextMargin && dir.value === 'y' && (extraStyle.marginBottom = nextMargin) } - const newChild = React.cloneElement(child, { itemIndex: index, scale: props.scale }) - return ({newChild}) + const newChild = React.cloneElement(child, { + itemIndex: index, + scale: props.scale, + customStyle: [itemAnimatedStyles, extraStyle], + key: 'page' + index + }) + return newChild }) const contextValue = { offset, @@ -360,6 +356,7 @@ const SwiperWrapper = forwardRef, SwiperProps>((pr } function getInitOffset () { + 'worklet' if (!step.value) return 0 let targetOffset = 0 if (props.circular && totalElements.value > 1) { @@ -400,6 +397,22 @@ const SwiperWrapper = forwardRef, SwiperProps>((pr } }) + useAnimatedReaction(() => step.value, (newIndex, preIndex) => { + const targetOffset = getInitOffset() + if (offset.value !== targetOffset) { + if (props.circular && props.current && props.current > 0) { + offset.value = targetOffset + } else { + offset.value = withTiming(targetOffset, { + duration: easeDuration, + easing: easeMap[easeingFunc] + }, () => { + offset.value = targetOffset + }) + } + } + }) + useEffect(() => { if (!step.value) { return @@ -655,15 +668,19 @@ const SwiperWrapper = forwardRef, SwiperProps>((pr const animatedStyles = useAnimatedStyle(() => { if (dir.value === 'x') { - return { transform: [{ translateX: offset.value }] } + return { transform: [{ translateX: offset.value }], opacity: step.value > 0 ? 1 : 0 } } else { - return { transform: [{ translateY: offset.value }] } + return { transform: [{ translateY: offset.value }], opacity: step.value > 0 ? 1 : 0 } } }) function renderSwiper () { return ( - + {wrapChildren({ children: arrPages }, {