1import React from 'react'; 2import {StyleProp, StyleSheet, ViewStyle} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import ThemeText from './themeText'; 5import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; 6import {iconSizeConst} from '@/constants/uiConst'; 7import useColors from '@/hooks/useColors'; 8import {TouchableOpacity} from 'react-native-gesture-handler'; 9 10interface IProps { 11 icon: string; 12 onPress?: () => void; 13 containerStyle?: StyleProp<ViewStyle>; 14 children?: string; 15} 16export default function (props: IProps) { 17 const {icon, children, onPress, containerStyle} = props; 18 const colors = useColors(); 19 20 return ( 21 <TouchableOpacity 22 activeOpacity={0.7} 23 style={[style.container, containerStyle]} 24 onPress={onPress}> 25 <Icon name={icon} size={iconSizeConst.light} color={colors.text} /> 26 <ThemeText style={style.text} fontSize={'content'}> 27 {children} 28 </ThemeText> 29 </TouchableOpacity> 30 ); 31} 32 33const style = StyleSheet.create({ 34 container: { 35 flexDirection: 'row', 36 alignItems: 'center', 37 paddingHorizontal: rpx(16), 38 paddingVertical: rpx(8), 39 }, 40 text: { 41 marginLeft: rpx(8), 42 }, 43}); 44