72 lines
1.6 KiB
TypeScript
72 lines
1.6 KiB
TypeScript
import React, { forwardRef } from 'react'
|
|
import { View, TouchableOpacity, ViewStyle, Pressable } from 'react-native'
|
|
import Animated from 'react-native-reanimated'
|
|
|
|
const AnimatedView = Animated.createAnimatedComponent(View)
|
|
|
|
interface BlockProps {
|
|
onClick?: () => void
|
|
onLongPress?: () => void
|
|
animated?: boolean
|
|
style?: ViewStyle
|
|
children?: React.ReactNode
|
|
opacity?: number
|
|
touchProps?: any
|
|
className?: string
|
|
}
|
|
|
|
const Block = forwardRef<View, BlockProps>((props, ref) => {
|
|
const {
|
|
onClick = null,
|
|
onLongPress,
|
|
animated,
|
|
children,
|
|
opacity,
|
|
touchProps,
|
|
className = '',
|
|
...reset
|
|
} = props
|
|
|
|
const handlePress = () => {
|
|
onClick && onClick()
|
|
}
|
|
|
|
if ((onClick || onLongPress) && opacity) {
|
|
return (
|
|
<TouchableOpacity
|
|
activeOpacity={opacity || 0.85}
|
|
onPress={handlePress}
|
|
onLongPress={onLongPress}
|
|
>
|
|
<View className={className} {...reset} ref={ref}>
|
|
{children}
|
|
</View>
|
|
</TouchableOpacity>
|
|
)
|
|
} else if (onClick || onLongPress) {
|
|
return (
|
|
<Pressable onPress={handlePress} onLongPress={onLongPress} {...touchProps}>
|
|
<View className={className} {...reset} ref={ref}>
|
|
{children}
|
|
</View>
|
|
</Pressable>
|
|
)
|
|
} else if (animated) {
|
|
return (
|
|
<AnimatedView className={className} {...reset} ref={ref}>
|
|
{children}
|
|
</AnimatedView>
|
|
)
|
|
} else {
|
|
return (
|
|
<View className={className} {...reset} ref={ref}>
|
|
{children}
|
|
</View>
|
|
)
|
|
}
|
|
})
|
|
|
|
// 添加displayName以便在React DevTools中显示组件名称
|
|
Block.displayName = 'Block'
|
|
export default Block
|