react native 图片预览

在React Native中实现图片预览，可以使用react-native-image-view库。首先需要安装这个库：

npm install react-native-image-view

然后链接原生模块（如果你使用的是React Native 0.60及以上版本，这一步可能不需要）：

react-native link react-native-image-view

以下是一个简单的图片预览组件的实现：

import React, { useState } from 'react';
import { View, Image, StyleSheet, TouchableOpacity } from 'react-native';
import ImageViewer from 'react-native-image-view';
 
const ImagePreview = ({ images }) => {
  const [isVisible, setIsVisible] = useState(false);
  const [index, setIndex] = useState(0);
 
  const openImageViewer = (index) => {
    setIndex(index);
    setIsVisible(true);
  };
 
  const renderImages = () => {
    return images.map((image, index) => (
      <TouchableOpacity key={index} onPress={() => openImageViewer(index)}>
        <Image source={{ uri: image }} style={styles.thumbnail} />
      </TouchableOpacity>
    ));
  };
 
  return (
    <View>
      <View style={styles.container}>{renderImages()}</View>
      <ImageViewer
        imageUrls={images.map((image) => ({ url: image }))}
        index={index}
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
      />
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  thumbnail: {
    width: 100,
    height: 100,
    margin: 5,
  },
});
 
export default ImagePreview;

在这个组件中，images是一个包含图片URI的数组。每个图片旁边有一个可点击的缩略图。点击任何缩略图将打开图片预览，并且可以通过点击关闭按钮或者点击背景来关闭预览。