React-Native横向浏览相册（带大图浏览）

大白熊_BlankBear

于 2021-05-11 14:54:32 发布

阅读量762

点赞数

CC 4.0 BY-SA版权

分类专栏： react-native

本文链接：https://blog.csdn.net/qq_34823218/article/details/116655158

本文介绍了如何使用react-native-image-zoom-viewer库创建一个带有大图浏览功能的横向相册。详细讲解了安装、版本兼容、图片加载、本地文件路径处理、单击事件以及图片保存到相机胶卷的方法。特别提到了iOS平台的权限配置和库的链接步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react-native-image-zoom-viewer

npm网址和文档

https://www.npmjs.com/package/react-native-image-zoom-viewer

安装：

npm i react-native-image-zoom-viewer --save

react-native link react-native-image-zoom-viewer

//一般自动link就可以如果有什么问题，ios可以拉到最下面参考

版本： "react": "16.8.3", "react-native": "0.59.9", "react-native-image-zoom-viewer": "^3.0.1"

使用方法

使用了react-native-image-zoom-viewer 实现放大查看图片的左右指滑动

官网Demo

import { Modal } from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';

const images = [{
    // Simplest usage.
    url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',

    // width: number
    // height: number
    // Optional, if you know the image size, you can set the optimization performance

    // You can pass props to <Image />.
    props: {
        // headers: ...
    }
}, {
    props: {
        // Or you can set source directory.
        url: '',
        source: require('../background.png')
    }
}]

export default class App extends React.Component {
    render: function() {
        return (
            <Modal visible={true} transparent={true}>
&nb