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

Fawziya ·

更新时间:2024-11-10

· 1420 次阅读

react-native-image-viewer大图预览

先看一个实现的效果

实例

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

Props

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) =>