這篇文章將為大家詳細講解有關(guān)React Native圖片查看組件的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)建站專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、興慶網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、購物商城網(wǎng)站建設(shè)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為興慶等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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 (
   
    
   
  );
 }
}

主要參數(shù)說明

1. imageUrls 圖片url地址的數(shù)組

2. enableImageZoom 是否允許縮放

3. failImageSource 加載失敗時顯示的圖片

4. loadingRender 加載loading

5. renderHeader 頭部樣式

6. renderFooter 底部樣式

7. renderIndicator 頁碼指示器樣式

關(guān)于“React Native圖片查看組件的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。