使用react-native-image-viewer实现大图预览

2024-12-02 10:40:27

react-native-image-viewer大图预览

在移动开发中，特别是涉及到图片的应用开发中，经常会遇到图片预览等功能，并且预览支持图片的放大和缩小，在Android原生开发中可以使用PhotoViewPager库实现，如果在React Native中，可以选择使用react-native-image-viewer。

先看一个实现的效果

实例

使用前需要先安装react-native-image-viewer库，安装命令如下：

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

然后引入ImageViewer组件，然后设置图片的数据源即可，imageUrls接受一个图片数组。

下面是一个简单的实例代码

import React, {PureComponent, Component} from 'react'
import {View, Modal,Navigator} from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';
const images = [{
        url: "https://avatars2.gitdubusercontent.com/u/7970947?v=3&s=460",
        // url:
        // "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527660246058&di=6f0f1b19cf05a64317cbc5d2b3713d64&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0112a85874bd24a801219c7729e77d.jpg",
        // props: {
        //     // headers: ...
        //     // source: require('./img.png')
        // },
        // freeHeight: true
    },
    {url: "https://avatars2.gitdubusercontent.com/u/7970947?v=3&s=460"}
];
export default class ImageZoom extends PureComponent {
    state = {
        index: 0,
        modalVisible: true
    };
    render() {
        return (
            <View
                style={{
                    padding: 10
                }}
            >
                <Modal
                    visible={tdis.state.modalVisible}
                    transparent={true}
                    onRequestClose={() => tdis.setState({modalVisible: false})}>
                    <ImageViewer imageUrls={images} index={tdis.state.index}/>
                </Modal>
            </View>
        )
    }
}

Props

react-native-image-viewer库提供了诸多的属性，常见的属性如下。

属性名	type	描述	默认值
imageUrls(必填)	array	图片数据源
enableImageZoom	boolean	是否可以进行缩放操作	true
onShowModal	(content?: JSX.Element) => void	弹出大图回调	() => {}
onCancel	() => void	取消图片回调	() => {}
fliptdreshold	number	滑动到下一页的X值	80
maxOverflow	number	滑动到下一页的X位置最大值	300
index	number	初始显示第几张图片	0
failImageSource	{uri: string}	加载失败显示图片	”
loadingRender	() => React.ReactElement	渲染loading	() => null
onSaveToCamera	(index?: number => void	保存到相机的回调	() => {}
onChange	(index?: number => void	图片切换时触发	() => {}
saveToLocalByLongPress	boolean	是否开启长按保存图片到本地	true
onClick	(onCancel?: function) => void	单击事件	(onCancel) => {onCancel()}
onDoubleClick	(onCancel?: function) => void	双击事件	(onCancel) => {onCancel()}
onSave	(url: string) => void	保存图片到本地，	(onCancel) => {onCancel()}
renderFooter	() => React.ReactElement	自定义头部	() => null
renderFooter	() => React.ReactElement	自定义尾部视图	() => null
renderIndicator	(currentIndex?: number, allSize?) => React.ReactElement: number	自定义计时器	(currentIndex, allSize) => currentIndex + “/” + allSize
renderImage	(props: any) => React.ReactElement	自定义Image组件	(props) =>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

react-native 父函数组件调用类子组件的方法(实例详解)

react-native 父函数组件调用类子组件的方法,代码如下所示: import React, {Component} from 'react'; import {Text, View, TouchableOpacity} from 'react-native'; // 父 let child onRefbbb = (ref) => { child = ref } clickccc = () => { child.myName() } const Parent =()=> { ret
使用react-native-doc-viewer实现文档预览

目录 react-native-doc-viewer文档预览具体步骤如下 react-native初体验的总结一.前提知识点二.开发前后相关的一些配置三.开发项目中用到的知识四.ui库五.项目搭建六.根据需要安装对应依赖七.开发和调试 react-native-doc-viewer文档预览 react-native项目要求实现word,excel,pdf,mp4,png等格式附件图片的在线预览,最终选用react-native-doc-viewer实现, 具体步骤如下 1.安装r
详解React Native项目中启用Hermes引擎

目录引言一.启用 Hermes 引擎 1.1 Android 1.2 iOS 二.Hermes 引擎使用 2.1 检查 Hermes 引擎是否启用 2.2 绑定Hermes 2.3 使用DevTools在Hermes上调试JS 引言目前,最新版本的React Native(0.70.0及以上版本)已经默认开启了Hermes引擎.而Hermes则是专门针对React Native应用而优化的全新JavaScript引擎,启用Hermes引擎可以优化启动时间,减少内存占用以及空间占用. 一.启
React Native 的动态列表方案探索详解

目录背景技术方案介绍内存异常处理未来规划背景时至2022,精细化运营已经成为了各大App厂商的强需求,阿里的 DinamicX.Tangram 大家应该都很熟悉了,很多App厂商也自研了一些类似框架,基于DSL的动态化方案虽然有性能上的一些优势,但是毕竟不是图灵完备,一些需要逻辑动态下发的需求实现成本偏高,或由于DSL本身限制无法实现,针对这个问题我们使用RN进行了一下探索尝试, 利用我们已经相对完善的RN基建,结合客户端列表能力低成本的实现了一套的动态化能力,同时兼顾一定的性能体
react-native 实现渐变色背景过程

目录 react-native 渐变色背景 react-native学习记录滚动条轮播图示例渐变色 ScrollableTabView默认页面 ScrollableTabView背景颜色 ScrollableTabView选中颜色 ScrollableTabView未选中颜色 react-native 渐变色背景使用react-native-linear-gradient插件 1.安装 npm react-native-linear-gradient 2.链接 react-native
使用react-native-image-viewer实现大图预览

目录 react-native-image-viewer大图预览先看一个实现的效果实例下面是一个简单的实例代码 Props react-native-image-viewer大图预览在移动开发中,特别是涉及到图片的应用开发中,经常会遇到图片预览等功能,并且预览支持图片的放大和缩小,在Android原生开发中可以使用PhotoViewPager库实现,如果在React Native中,可以选择使用react-native-image-viewer. 先看一个实现的效果实例使用前需要先安
vue iview多张图片大图预览、缩放翻转

本文实例为大家分享了vue iview多张图片大图预览,可缩放翻转,供大家参考,具体内容如下先看效果: 完整项目代码地址具体代码如下: <style lang="less"> @import "../advanced-router.less"; </style> <template> <div class="balance-accounts"> <Row class-name="
Android仿头条、微信大图预览视图的方法详解

图片大图预览在我现在的项目当中,也存在大图预览的功能,但其实现过于繁重,采用一个Activity实现,并且在图片展示的过程中会产生卡顿感,整体感觉很是不好,正巧项目也在重构过程中,所以决定将这一功能写成一个成型的控件. 话不多说,先上图看下效果. 整体实现思路图片展示:PhotoView(大图支持双击放大) 图片加载:Glide(加载网络图片.本地图片.资源文件) 小图变大图时的实现:动画图片的下载:插入系统相册该控件采用自定义View的方式,通过一些基本的控件的组合,来形成一个具有大图
React+ajax+java实现上传图片并预览功能

之前有在网上找ajax上传图片的资料,大部分的人写得都是用jQuery,但是在这里用JQuery就大才小用了,所以我就自己写了,先上图. 由上图,首先点击上面的选择文件,在选择图片之后,将会自动上传图片到服务器,并且返回图片名字和图片在服务器的路径,然后在页面显示文件名字和图片. 源码:ajax上传预览 React中: import React from 'react'; import Http from './http' const URL = 'http://localhost:8080/f
elementui实现预览图片组件二次封装

起因在elementui组件库中,el-image组件有个预览图片功能,比较简洁,但是和图片绑定在一起,我们只想要一个单纯的预览组件,传递一个图片,通过事件方式,显示大图分析通过查看elementui的代码,发现在image(el-image组件)目录中里面有一个image-viewer组件, el-image组件的预览功能也是通过这一个组件实现的,只是官方没有把这个组件单独暴露出来这里就比较简单了,我们可以使用手动导入组件的方式,引入image-viewer组件 image-viewe
Vue.js 2.0 移动端拍照压缩图片上传预览功能

在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上
Vue.js 2.0 移动端拍照压缩图片预览及上传实例

在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上
react native android6+拍照闪退或重启的解决方案

前言 android 6+权限使用的时候需要动态申请,那么在使用rn的时候要怎么处理拍照权限问题呢?本文提供的是一揽子rn操作相册.拍照的解决方案,请看正文的提高班部分. 解决步骤 1.AndroidManifest.xml设置拍照权限: <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="andr
react native 仿微信聊天室实例代码

一.前言 9月,又到开学的季节.为每个一直默默努力的自己点赞!最近都沉浸在react native原生app开发中,之前也有使用vue/react/angular等技术开发过聊天室项目,另外还使用RN技术做了个自定义模态弹窗rnPop组件. 一.项目简述基于react+react-native+react-navigation+react-redux+react-native-swiper+rnPop等技术开发的仿微信原生App界面聊天室--RN_ChatRoom,实现了原生app启动页.As
React Native中实现动态导入的示例代码

目录背景多业务包动态导入 Metro 打包原理打包过程 bundle 分析 __d函数 __r函数方案设计分识别入口树拆分 bundle 生成合总结背景随着业务的发展,每一个 React Native 应用的代码数量都在不断增加,bundle 体积不断膨胀,对应用性能的负面影响愈发明显.虽然我们可以通过 React Native 官方工具 Metro 进行拆包处理,拆分为一个基础包和一个业务包进行一定程度上的优化,但对日益增长的业务代码也无能为力,我们迫切地需要一套方案来

使用react-native-image-viewer实现大图预览

目录

react-native-image-viewer大图预览

先看一个实现的效果

实例

下面是一个简单的实例代码

Props

相关推荐

随机推荐