react-native 图片预览组件

上图

此组件基于通用弹窗组件，将完整代码复制到项目即可：https://blog.csdn.net/qq_38545425/article/details/121922005

安装依赖：yarn add react-native-image-zoom-viewer

• 采用函数式调用，一行代码即可唤起预览效果，可预览本地及网络图片

上源码

//ImageZoom.js
import React, {PureComponent} from 'react';
import {Modal} from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';
import {showModal} from '../showModal/ShowModal';
import PropTypes from 'prop-types';

/**
 * 预览图片集合
 * @param imageUrls  图片地址
 * @param index 当前下标
 */
export const previewImgArray = (imageUrls = [], index = 0) => {
  let newArr = imageUrls.map((item) => {
    if (item.indexOf('http://') !== -1 || item.indexOf('https://') !== -1) {
      return {url: item};
    } else {
      return {url: '', props: {source: item}};
    }
  });
  showModal(<ImageZoom
    imageUrls={newArr}
    index={index}
  />);
};

/**
 * 预览单张图片
 * @param imageUrl
 */
export const previewImg = (imageUrl) => {
  let imageUrls = [{
    url: imageUrl
  }];
  showModal(<ImageZoom
    imageUrls={imageUrls}
    index={0}
  />);
};

class ImageZoom extends PureComponent {

  constructor(props) {
    super(props);
    this.state = ({
      modalVisible: true
    });
  }

  static propTypes = {
    imageUrls: PropTypes.array.isRequired,
    index: PropTypes.number
  };

  hidden = () => {
    this.setState({
      modalVisible: false
    });
  };

  render() {
    return <Modal
      visible={this.state.modalVisible}
      transparent={true}
      animationType={'fade'}
      onRequestClose={() => this.setState({modalVisible: false})}>
      <ImageViewer
        onClick={() => {
          this.hidden();
        }}
        imageUrls={this.props.imageUrls}
        index={this.props.index}
      />
    </Modal>;
  }
}

使用示例

previewImgArray( [
     'https://pics5.baidu.com/feed/0824ab18972bd407b1c6e9fac20d0b580eb309c5.jpeg?token=a1a3cee62368dd3200b17a880a41bb53',
     'https://pics4.baidu.com/feed/d52a2834349b033b28274266d74aa3dad439bd69.png?token=833e80ac83dc15945f896b51049b7045',
     'https://pics1.baidu.com/feed/472309f79052982226519ab1684eeec20b46d4f4.jpeg?token=30ae1c7548f276a6c250fbee8dd808f5'
], 1)

原文：https://blog.csdn.net/qq_38545425/article/details/121991737