Skip to content

Commit

Permalink
Merge branch 'fix-drn' of https://github.com/didi/mpx into fix-drn
Browse files Browse the repository at this point in the history
  • Loading branch information
wangcuijuan committed Dec 24, 2024
2 parents 2dc389d + 62d15e1 commit a145bb2
Show file tree
Hide file tree
Showing 3 changed files with 138 additions and 95 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,8 @@ export const IntersectionObserverContext = createContext<IntersectionObserver |

export const RouteContext = createContext<number | null>(null)

export const SwiperContext = createContext({})

export const KeyboardAvoidContext = createContext<KeyboardAvoidContextValue | null>(null)

export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null })
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { View, LayoutChangeEvent } from 'react-native'
import { ReactNode, forwardRef, useRef } from 'react'
import { View } from 'react-native'
import Animated, { useAnimatedStyle, interpolate, SharedValue } from 'react-native-reanimated'
import { ReactNode, forwardRef, useRef, useContext } from 'react'
import useInnerProps from './getInnerListeners'
import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils'
import { SwiperContext } from './context'

interface SwiperItemProps {
'item-id'?: string;
Expand All @@ -14,15 +16,29 @@ interface SwiperItemProps {
'parent-height'?: number;
children?: ReactNode;
style?: Object;
customStyle: [];
itemIndex: number;
scale: boolean;
}

interface ContextType {
offset: SharedValue<number>,
step: SharedValue<number>
}

const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProps>((props: SwiperItemProps, ref) => {
const {
'enable-var': enableVar,
'external-var-context': externalVarContext,
style
style,
customStyle,
itemIndex,
scale
} = props

const contextValue = useContext(SwiperContext) as ContextType
const offset = contextValue.offset || 0
const step = contextValue.step || 0
const { textProps } = splitProps(props)
const nodeRef = useRef(null)

Expand All @@ -47,19 +63,31 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
} = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef })

const innerProps = useInnerProps(props, {
style: { ...innerStyle, ...layoutStyle },
ref: nodeRef,
...layoutProps
}, [
'children',
'enable-offset'
'enable-offset',
'style'
], { layoutRef })

const itemAnimatedStyle = useAnimatedStyle(() => {
if (!step.value) return {}
const inputRange = [step.value, 0]
const outputRange = [0.7, 1]
return {
transform: [{
scale: interpolate(Math.abs(Math.abs(offset.value) - itemIndex * step.value), inputRange, outputRange)
}]
}
})
const mergeStyle = [innerStyle, layoutStyle, { width: '100%', height: '100%' }, scale ? itemAnimatedStyle : {}].concat(customStyle)
return (
<View
data-itemId={props['item-id']}
{...innerProps}>
{
<Animated.View
{...innerProps}
style={mergeStyle}
data-itemId={props['item-id']}>
{
wrapChildren(
props,
{
Expand All @@ -70,7 +98,7 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
}
)
}
</View>
</Animated.View>
)
})

Expand Down
Loading

0 comments on commit a145bb2

Please sign in to comment.