React Native 圖片查看組件

時間 2019-12-07

標籤 react native 圖片查看組件欄目 React 简体版

原文原文鏈接

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

新的一年，新的開始，祝你們旺旺年旺旺旺！

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

效果圖

安裝方法

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

使用示例

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