iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >使用react-native-image-viewer实现大图预览
  • 492
分享到

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

2024-04-02 19:04:59 492人浏览 八月长安
摘要

目录React-native-image-viewer大图预览先看一个实现的效果实例下面是一个简单的实例代码Propsreact-native-image-viewer大图预览 在移

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图片数据源 
enableImageZoomboolean是否可以进行缩放操作true
onShowModal(content?: jsX.Element) => void弹出大图回调() => {}
onCancel() => void取消图片回调() => {}
fliptdresholdnumber滑动到下一页的X值80
maxOverflownumber滑动到下一页的X位置最大值300
indexnumber初始显示第几张图片0
failImageSource{uri: string}加载失败显示图片
loadingRender() => React.ReactElement渲染loading() => null
onSaveToCamera(index?: number => void保存到相机的回调() => {}
onChange(index?: number => void图片切换时触发() => {}
saveToLocalByLongPressboolean是否开启长按保存图片到本地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) =>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: 使用react-native-image-viewer实现大图预览

本文链接: https://www.lsjlt.com/news/167601.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作