1import React from 'react'; 2import {Image, StyleSheet} from 'react-native'; 3import rpx, {vh, vw} from '@/utils/rpx'; 4import Toast from '@/utils/toast'; 5import useOrientation from '@/hooks/useOrientation.ts'; 6import {galleryBasePath, saveToGallery} from '@/utils/fileUtils.ts'; 7import {errorLog} from '@/utils/log.ts'; 8import PanelFullscreen from '@/components/panels/base/panelFullscreen.tsx'; 9import {Button} from '@/components/base/button.tsx'; 10 11interface IImageViewerProps { 12 // 图片路径 13 url: string; 14} 15 16export default function ImageViewer(props: IImageViewerProps) { 17 const {url} = props; 18 const orientation = useOrientation(); 19 20 return ( 21 <PanelFullscreen 22 hasMask 23 animationType="Scale" 24 containerStyle={styles.container}> 25 <Image 26 style={ 27 orientation === 'vertical' 28 ? { 29 width: vw(100), 30 minHeight: vw(100), 31 maxHeight: vh(100), 32 resizeMode: 'cover', 33 } 34 : { 35 maxWidth: vw(80), 36 height: vh(60), 37 minWidth: vh(60), 38 resizeMode: 'cover', 39 } 40 } 41 source={{ 42 uri: url, 43 }} 44 /> 45 <Button 46 text={'保存图片'} 47 type="primary" 48 style={styles.button} 49 onPress={() => { 50 saveToGallery(url) 51 .then(() => { 52 Toast.success(`图片已保存到 ${galleryBasePath}`); 53 }) 54 .catch(e => { 55 errorLog('保存失败', e?.message ?? e); 56 Toast.warn(`保存失败: ${e?.message ?? e}`); 57 }); 58 }} 59 /> 60 </PanelFullscreen> 61 ); 62} 63 64const styles = StyleSheet.create({ 65 container: { 66 justifyContent: 'center', 67 alignItems: 'center', 68 gap: rpx(48), 69 }, 70 button: { 71 marginHorizontal: rpx(24), 72 paddingHorizontal: rpx(200), 73 }, 74}); 75