1import React from 'react'; 2import {Pressable, StyleSheet} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import useColors from '@/hooks/useColors'; 5import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; 6import {iconSizeConst} from '@/constants/uiConst'; 7 8interface IFabProps { 9 icon?: string; 10 onPress?: () => void; 11} 12export default function Fab(props: IFabProps) { 13 const {icon, onPress} = props; 14 15 const colors = useColors(); 16 17 return ( 18 <Pressable 19 onPress={onPress} 20 style={[ 21 styles.container, 22 { 23 backgroundColor: colors.primary, 24 }, 25 ]}> 26 {icon ? ( 27 <Icon 28 name={icon} 29 color={colors.headerText} 30 size={iconSizeConst.normal} 31 /> 32 ) : null} 33 </Pressable> 34 ); 35} 36 37const styles = StyleSheet.create({ 38 container: { 39 width: rpx(108), 40 height: rpx(108), 41 borderRadius: rpx(54), 42 position: 'absolute', 43 zIndex: 10010, 44 right: rpx(36), 45 bottom: rpx(72), 46 justifyContent: 'center', 47 alignItems: 'center', 48 shadowColor: '#000', 49 shadowOffset: { 50 width: 0, 51 height: 5, 52 }, 53 shadowOpacity: 0.34, 54 shadowRadius: 6.27, 55 56 elevation: 10, 57 }, 58}); 59