React Native檢視元件

這次帶給大家React Native檢視元件，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: &#39;https://avatars2.githubusercontent.com/u/7970947?v=3&s=460&#39;,
      width: Dimensions.get(&#39;window&#39;).width,
      height: Dimensions.get(&#39;window&#39;).width,
     }}
    />
   </View>
  );
 }
}

主要參數說明

1. imageUrls 圖片url位址的陣列

2. enableImageZoom 是否允許縮放

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

4. loadingRender 載入loading

5. renderHeader 頭部樣式

6. #renderFooter 底部樣式

7. renderIndicator 頁碼指示器樣式

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

怎麼實作微信web端後退強制刷新

用js快速的取得html頁面中圖片的位址

以上是React Native檢視元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！