在 React Native 中使用 Image Zoom Viewer 添加捏合缩放功能

• CSS技巧与案例详解
• vue2与vue3技巧合集
• VueUse源码解读

放大图像可以大大增强用户体验，使用户能够详细检查图像。在本指南中，我们将探讨如何使用 react-native-image-zoom-viewer 库结合 react-native-image-progress 和 react-native-fast-image 在 React Native 应用中实现捏合缩放功能。

前提条件

在开始之前，请确保 React Native 项目中已安装以下库：

• react-native-image-progress
• react-native-fast-image
• react-native-image-zoom-viewer

通过 npm 安装它们：

npm install react-native-image-progress react-native-fast-image react-native-image-zoom-viewer

步骤 1：导入所需组件

首先，从已安装的库中导入所有必要的组件：

import React from 'react';
import { ActivityIndicator, Modal } from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';
import FastImage from 'react-native-fast-image';
import { createImageProgress } from 'react-native-image-progress';

步骤 2：创建自定义图像组件

将 FastImage 组件用 createImageProgress 包裹起来，以在获取图像时显示加载器：

const Image = createImageProgress(FastImage);

步骤 3：构建 ZoomModal 组件

现在，我们创建一个使用 react-native-image-zoom-viewer 中的 ImageViewer 显示带有捏合缩放功能图像的 ZoomModal 组件。我们还将定义一个 renderImage 函数来渲染带有加载器的图像。

ZoomModal 组件

import React from 'react';
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
import Modal from 'react-native-modal';
import ImageViewer from 'react-native-image-zoom-viewer';
import FastImage from 'react-native-fast-image';
import { createImageProgress } from 'react-native-image-progress';
import { ActivityIndicator } from 'react-native';

const Image = createImageProgress(FastImage);

const renderLoading = () => (
  <ActivityIndicator color="white" size="large" />
);

const renderImage = ({ source, style }) => (
  <Image
    source={{ uri: source?.uri, priority: 'high' }}
    style={style}
    resizeMode="contain"
    indicator={renderLoading}
  />
);

const ZoomModal = ({ images, visible, currentIndex, closeModal }) => {
  return (
    <Modal isVisible={visible} style={styles.modal}>
      <View style={styles.closeButtonContainer}>
        <TouchableOpacity onPress={closeModal} style={styles.closeButton}>
          <Text style={styles.closeButtonText}>Close</Text>
        </TouchableOpacity>
      </View>
      <ImageViewer
        enablePreload={true}
        index={currentIndex}
        imageUrls={images}
        useNativeDriver={true}
        enableSwipeDown={true}
        renderImage={renderImage}
        loadingRender={renderLoading}
        saveToLocalByLongPress={false}
      />
    </Modal>
  );
};

const styles = StyleSheet.create({
  modal: {
    margin: 0,
    justifyContent: 'center',
  },
  closeButtonContainer: {
    position: 'absolute',
    top: 30,
    right: 20,
    zIndex: 1,
  },
  closeButton: {
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    padding: 10,
    borderRadius: 5,
  },
  closeButtonText: {
    color: '#fff',
    fontSize: 16,
  },
});

export default ZoomModal;

步骤 4：在应用中集成 ZoomModal

将 ZoomModal 组件集成到主应用程序文件中以使用捏合缩放功能：

应用组件

import React, { useState } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import ZoomModal from './ZoomModal';

const App = () => {
  const [isVisible, setIsVisible] = useState(false);
  const [currentIndex, setCurrentIndex] = useState(0);

  const images = [
    { url: 'https://example.com/image1.jpg' },
    { url: 'https://example.com/image2.jpg' },
  ];

  const openZoomModal = (index) => {
    setCurrentIndex(index);
    setIsVisible(true);
  };

  const closeZoomModal = () => {
    setIsVisible(false);
  };

  return (
    <View style={styles.container}>
      <Button title="Open Image Viewer" onPress={() => openZoomModal(0)} />
      <ZoomModal
        images={images}
        visible={isVisible}
        currentIndex={currentIndex}
        closeModal={closeZoomModal}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

总结

我们已经成功地在 React Native 应用中使用 react-native-image-zoom-viewer 库实现了图片的捏合缩放功能。这个功能通过允许用户放大图片并更详细地查看它们，提高了用户体验。

首发于公众号 大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。