使用react-native-image-viewer實(shí)現(xiàn)大圖預(yù)覽
react-native-image-viewer大圖預(yù)覽
在移動(dòng)開發(fā)中,特別是涉及到圖片的應(yīng)用開發(fā)中,經(jīng)常會(huì)遇到圖片預(yù)覽等功能,并且預(yù)覽支持圖片的放大和縮小,在Android原生開發(fā)中可以使用PhotoViewPager庫實(shí)現(xiàn),如果在React Native中,可以選擇使用react-native-image-viewer。
先看一個(gè)實(shí)現(xiàn)的效果
實(shí)例
使用前需要先安裝react-native-image-viewer庫,安裝命令如下:
npm i react-native-image-zoom-viewer --save
然后引入ImageViewer組件,然后設(shè)置圖片的數(shù)據(jù)源即可,imageUrls接受一個(gè)圖片數(shù)組。
下面是一個(gè)簡單的實(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 | 描述 | 默認(rèn)值 |
imageUrls(必填) | array | 圖片數(shù)據(jù)源 | |
enableImageZoom | boolean | 是否可以進(jìn)行縮放操作 | true |
onShowModal | (content?: JSX.Element) => void | 彈出大圖回調(diào) | () => {} |
onCancel | () => void | 取消圖片回調(diào) | () => {} |
fliptdreshold | number | 滑動(dòng)到下一頁的X值 | 80 |
maxOverflow | number | 滑動(dòng)到下一頁的X位置最大值 | 300 |
index | number | 初始顯示第幾張圖片 | 0 |
failImageSource | {uri: string} | 加載失敗顯示圖片 | ” |
loadingRender | () => React.ReactElement | 渲染loading | () => null |
onSaveToCamera | (index?: number => void | 保存到相機(jī)的回調(diào) | () => {} |
onChange | (index?: number => void | 圖片切換時(shí)觸發(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 | 自定義計(jì)時(shí)器 | (currentIndex, allSize) => currentIndex + “/” + allSize |
renderImage | (props: any) => React.ReactElement | 自定義Image組件 | (props) => |
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
通過React-Native實(shí)現(xiàn)自定義橫向滑動(dòng)進(jìn)度條的 ScrollView組件
開發(fā)一個(gè)首頁擺放菜單入口的ScrollView可滑動(dòng)組件,允許自定義橫向滑動(dòng)進(jìn)度條,且內(nèi)部渲染的菜單內(nèi)容支持自定義展示的行數(shù)和列數(shù),在內(nèi)容超出屏幕后,渲染順序?yàn)榭v向由上至下依次排列,對(duì)React Native橫向滑動(dòng)進(jìn)度條相關(guān)知識(shí)感興趣的朋友一起看看吧2024-02-02React組件內(nèi)事件傳參實(shí)現(xiàn)tab切換的示例代碼
本篇文章主要介紹了React組件內(nèi)事件傳參實(shí)現(xiàn)tab切換的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07React使用TailwindCSS的實(shí)現(xiàn)示例
TailwindCSS是一個(gè)實(shí)用優(yōu)先的CSS框架,本文主要介紹了React使用TailwindCSS的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12React?Native?中處理?Android?手機(jī)吞字的解決方案
這篇文章主要介紹了React?Native?中處理?Android?手機(jī)吞字的解決方案,作者在 React Native 0.67.4 環(huán)境下,編寫了一個(gè)小 demo 來復(fù)現(xiàn)這個(gè)問題,需要的朋友可以參考下2022-08-08React項(xiàng)目中fetch實(shí)現(xiàn)跨域接收傳遞session的解決方案
這篇文章主要介紹了React項(xiàng)目中fetch實(shí)現(xiàn)跨域接收傳遞session的解決方案,本次項(xiàng)目使用了react框架,同時(shí)使用fetch取代ajax作為獲取接口數(shù)據(jù)的交互方法,下面就對(duì)這次問題的解決做個(gè)總結(jié),需要的朋友可以參考下2022-04-04用react-redux實(shí)現(xiàn)react組件之間數(shù)據(jù)共享的方法
這篇文章主要介紹了用react-redux實(shí)現(xiàn)react組件之間數(shù)據(jù)共享的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06基于react項(xiàng)目打包c(diǎn)ss引用路徑錯(cuò)誤解決方案
這篇文章主要介紹了基于react項(xiàng)目打包c(diǎn)ss引用路徑錯(cuò)誤解決方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10一起來學(xué)習(xí)React元素的創(chuàng)建和渲染
這篇文章主要為大家詳細(xì)介紹了React元素的創(chuàng)建和渲染,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-03-03