安装
npm i react-native-image-zoom-viewer --save
// 引入
import ImageViewer from 'react-native-image-zoom-viewer';
import { Modal,TouchableWithoutFeedback,Image } from 'react-native';
// 图片地址
const [ url , setUrl ] =useState<string>('')
// 图片预览
const [isModelVisible, setIsModelVisible] = useState<boolean>(false);
// 预览图片地址、
const [imageViewer, setImageViewer] = useState<string>('');
<TouchableWithoutFeedback
onPress={() => {
previewImag(url);}}>
<Image source={{ url: url }}></Image>
</TouchableWithoutFeedback>
// 预览图片
<Modal visible={isModelVisible} transparent={true}>
<ImageViewer imageUrls={[{ url: imageViewer }]} onClick={() => handleHideModel()} />
</Modal>
// 点击预览图片
const previewImag = (url: string): void => {
if (!common.isNull(url)) {
setImageViewer(url);
// 打开预览图片
setIsModelVisible(true);
}
};
// 关闭预览
const handleHideModel = ():void => {
// 关闭预览图片
setIsModelVisible(false);
};