React Native 圖片查看組件的方法，

React Native 圖片查看組件的方法，

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

主要參數說明

1. imageUrls 圖片url地址的數組
2. enableImageZoom 是否允許縮放
3. failImageSource 載入失敗時顯示的圖片
4. loadingRender 載入loading
5. renderHeader 頭部樣式
6. renderFooter 底部樣式
7. renderIndicator 頁碼指標樣式

完整樣本

完整代碼：https://github.com/forrest23/ReactNativeComponents 本次範例程式碼在 Component06檔案夾中。

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

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。