react-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.githubusercontent.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.githubusercontent.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={this.state.modalVisible}
                    transparent={true}
                    onRequestClose={() => this.setState({modalVisible: false})}>
                    <ImageViewer imageUrls={images} index={this.state.index}/>
                </Modal>
            </View>
        )
    }
}

Props

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

属性 type 描述 默认值
imageUrls(必填) array 图片数据源
enableImageZoom boolean 是否可以进行缩放操作 true
onShowModal (content?: JSX.Element) => void 弹出大图回调 () => {}
onCancel () => void 取消图片回调 () => {}
flipThreshold 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) =>
原文链接:https://www.f2er.com/react/301419.html

猜你在找的React相关文章