React Native 圖片查看組件的方法

更新時間：2018年03月01日 13:49:51 作者：ReactNative開發(fā)圈

這篇文章主要介紹了React Native 圖片查看組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

React Native 圖片查看組件：react-native-image-viewer，純JS組件，小巧快速的圖標(biāo)查看組件。支持圖片放大縮小，支持圖片加載失敗設(shè)置替代圖片，支持將圖片保存到本地等功能。

效果圖

安裝方法

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

使用示例

const images = [
 {
  url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
 },
 {
  url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
 },
 {
  url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
 },
];

export default class Component06 extends Component {
 constructor(props) {
  super(props);
 }

 render() {
  return (
   <View style={{ flex: 1 }}>
    <ImageViewer
     imageUrls={images}
     failImageSource={{
      url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
      width: Dimensions.get('window').width,
      height: Dimensions.get('window').width,
     }}
    />
   </View>
  );
 }
}

主要參數(shù)說明

imageUrls 圖片url地址的數(shù)組
enableImageZoom 是否允許縮放
failImageSource 加載失敗時顯示的圖片
loadingRender 加載loading
renderHeader 頭部樣式
renderFooter 底部樣式
renderIndicator 頁碼指示器樣式

完整示例

完整代碼：https://github.com/forrest23/ReactNativeComponents 本次示例代碼在 Component06文件夾中。

組件地址：https://github.com/ascoders/react-native-image-viewer

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

ES6下React組件的寫法示例代碼
這篇文章主要給大家介紹了在ES6下React組件的寫法，其中包括定義React組件、聲明prop類型與默認(rèn)prop、設(shè)置初始state、自動綁定，文中分別給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。
2017-05-05
React?Hook實(shí)現(xiàn)對話框組件
這篇文章主要為大家詳細(xì)介紹了React?Hook實(shí)現(xiàn)對話框組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
React?Server?Component混合式渲染問題詳解
React?官方對?Server?Comopnent?是這樣介紹的:?zero-bundle-size?React?Server?Components，這篇文章主要介紹了React?Server?Component:?混合式渲染,需要的朋友可以參考下
2022-12-12
React?setState是異步還是同步原理解析
這篇文章主要為大家介紹了React?setState是異步還是同步原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
React表中顯示JSON數(shù)據(jù)demo
這篇文章主要為大家介紹了React表中顯示JSON數(shù)據(jù)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
react中useEffect Hook作用小結(jié)
React中useEffect是一個非常重要的Hook,它允許我們函數(shù)組件中執(zhí)行副作用操作,本文就來介紹一下useEffect Hook作用,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-11-11
React中props驗(yàn)證不足的問題及解決方案
在?React?開發(fā)中,props?是組件間通信的重要方式,通過?props,父組件可以向子組件傳遞數(shù)據(jù)和回調(diào)函數(shù),然而,如果對?props?的驗(yàn)證不足,可能會導(dǎo)致類型錯誤、運(yùn)行時錯誤或難以調(diào)試的問題,本文將探討?React?中?props?驗(yàn)證不足的常見問題,并提供解決方案
2025-03-03
React使用react-sortable-hoc如何實(shí)現(xiàn)拖拽效果
這篇文章主要介紹了React使用react-sortable-hoc如何實(shí)現(xiàn)拖拽效果問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
React通過redux-persist持久化數(shù)據(jù)存儲的方法示例
這篇文章主要介紹了React通過redux-persist持久化數(shù)據(jù)存儲的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-02-02
利用React Router4實(shí)現(xiàn)的服務(wù)端直出渲染(SSR)
這篇文章主要介紹了利用React Router4實(shí)現(xiàn)的服務(wù)端直出渲染(SSR)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01