React Native 图片查看组件

forrest23

发布于 2018-08-03 15:21:29

1.9K0

发布于 2018-08-03 15:21:29

文章被收录于专栏：React Native开发圈React Native开发圈

本文原创首发于公众号：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>
    );
  }
}