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.backdrop, 24 shadowColor: colors.shadow, 25 }, 26 ]}> 27 {icon ? ( 28 <Icon 29 name={icon} 30 color={colors.text} 31 size={iconSizeConst.normal} 32 /> 33 ) : null} 34 </Pressable> 35 ); 36} 37 38const styles = StyleSheet.create({ 39 container: { 40 width: rpx(108), 41 height: rpx(108), 42 borderRadius: rpx(54), 43 position: 'absolute', 44 zIndex: 10010, 45 right: rpx(36), 46 bottom: rpx(72), 47 justifyContent: 'center', 48 alignItems: 'center', 49 shadowOffset: { 50 width: 0, 51 height: 5, 52 }, 53 shadowOpacity: 0.34, 54 shadowRadius: 6.27, 55 56 elevation: 10, 57 }, 58}); 59