React Native 应用中使用 Image Zoom Viewer 实现手指捏合缩放功能

本文我们将实现如何使用 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

实现步骤

导入所需组件

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

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';

创建自定义图像组件

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

const Image = createImageProgress(FastImage);

构建 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;

在应用中集成 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 库实现了图片的手指捏合缩放功能。通过这个功能允许用户放大图片去详细地查看它们，提高了用户体验。

以上关于React Native 应用中使用 Image Zoom Viewer 实现手指捏合缩放功能的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。