本文原創首發於公眾號：ReactNative開發圈，轉載需註明出處。

新的一年，新的開始，祝大家旺旺年旺旺旺！

React Native 圖片檢視元件：react-native-image-viewer，純JS元件，小巧快速的圖示檢視元件。支援圖片放大縮小，支援圖片載入失敗設定替代圖片，支援將圖片儲存到本地等功能。

效果圖

安裝方法

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>
    );
  }
}
複製程式碼

主要引數說明

• imageUrls 圖片url地址的陣列
• enableImageZoom 是否允許縮放
• failImageSource 載入失敗時顯示的圖片
• loadingRender 載入loading
• renderHeader 頭部樣式
• renderFooter 底部樣式
• renderIndicator 頁碼指示器樣式

完整示例

完整程式碼：github.com/forrest23/R… 本次示例程式碼在 Component06資料夾中。請不要吝嗇你們的Star！

元件地址

github.com/ascoders/re…

微信不讓跳轉外鏈，可以點選檢視原文來檢視外鏈GitHub內容。

舉手之勞關注我的微信公眾號：ReactNative開發圈