70 lines
1.7 KiB
TypeScript
70 lines
1.7 KiB
TypeScript
import React, { forwardRef } from 'react'
|
|
import { Pressable, TouchableOpacity, View, type ViewStyle } 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}
|
|
className={className}
|
|
onLongPress={onLongPress}
|
|
onPress={handlePress}
|
|
{...reset}
|
|
{...touchProps}
|
|
ref={ref as any}
|
|
>
|
|
{children}
|
|
</TouchableOpacity>
|
|
)
|
|
} else if (onClick || onLongPress) {
|
|
return (
|
|
<Pressable
|
|
className={className}
|
|
onLongPress={onLongPress}
|
|
onPress={handlePress}
|
|
{...reset}
|
|
{...touchProps}
|
|
ref={ref as any}
|
|
>
|
|
{children}
|
|
</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
|