快捷導航

使用react-native-image-viewer實現(xiàn)大圖預覽

更新時間：2022年09月15日 10:29:01 作者：xiangzhihong8

這篇文章主要介紹了使用react-native-image-viewer實現(xiàn)大圖預覽，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

react-native-image-viewer大圖預覽

在移動開發(fā)中，特別是涉及到圖片的應(yīng)用開發(fā)中，經(jīng)常會遇到圖片預覽等功能，并且預覽支持圖片的放大和縮小，在Android原生開發(fā)中可以使用PhotoViewPager庫實現(xiàn)，如果在React Native中，可以選擇使用react-native-image-viewer。

先看一個實現(xiàn)的效果

實例

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

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

然后引入ImageViewer組件，然后設(shè)置圖片的數(shù)據(jù)源即可，imageUrls接受一個圖片數(shù)組。

下面是一個簡單的實例代碼

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	圖片數(shù)據(jù)源
enableImageZoom	boolean	是否可以進行縮放操作	true
onShowModal	(content?: JSX.Element) => void	彈出大圖回調(diào)	() => {}
onCancel	() => void	取消圖片回調(diào)	() => {}
fliptdreshold	number	滑動到下一頁的X值	80
maxOverflow	number	滑動到下一頁的X位置最大值	300
index	number	初始顯示第幾張圖片	0
failImageSource	{uri: string}	加載失敗顯示圖片	”
loadingRender	() => React.ReactElement	渲染loading	() => null
onSaveToCamera	(index?: number => void	保存到相機的回調(diào)	() => {}
onChange	(index?: number => void	圖片切換時觸發(fā)	() => {}
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) =>