1import React from 'react'; 2import {StyleProp, StyleSheet, ViewStyle} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import {TouchableOpacity} from 'react-native'; 5import Image from './image'; 6import {ImgAsset} from '@/constants/assetsConst'; 7import ThemeText from './themeText'; 8 9interface IImageBtnProps { 10 uri?: string; 11 title?: string; 12 onPress?: () => void; 13 style?: StyleProp<ViewStyle>; 14} 15export default function ImageBtn(props: IImageBtnProps) { 16 const {onPress, uri, title, style: _style} = props ?? {}; 17 return ( 18 <TouchableOpacity 19 activeOpacity={0.5} 20 onPress={onPress} 21 style={[style.wrapper, _style]}> 22 <Image 23 style={style.image} 24 uri={uri} 25 emptySrc={ImgAsset.albumDefault} 26 /> 27 <ThemeText 28 fontSize="subTitle" 29 numberOfLines={2} 30 ellipsizeMode="tail"> 31 {title ?? ''} 32 </ThemeText> 33 </TouchableOpacity> 34 ); 35} 36 37const style = StyleSheet.create({ 38 wrapper: { 39 width: rpx(210), 40 height: rpx(290), 41 flexGrow: 0, 42 flexShrink: 0, 43 }, 44 image: { 45 width: rpx(210), 46 height: rpx(210), 47 borderRadius: rpx(12), 48 marginBottom: rpx(16), 49 }, 50}); 51