seer-react-native-image-zoom-viewer
v2.0.0
Published
大图浏览
Downloads
5
Readme
fork from react-native-image-zoom-viewer
Show Cases
Swiper image
Zoom while sliding
Getting Started
Installation
npm i seer-react-native-image-zoom-viewer --save
Basic Usage
- Install react-native first
$ npm i react-native -g
- Initialization of a react-native project
$ react-native init myproject
- Then, edit myproject/index.ios.js, like this:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Modal
} from 'react-native';
import ImageViewer from 'seer-react-native-image-zoom-viewer';
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'
}]
class ImageViewer extends React.Component {
render: function() {
return (
<Modal visible={true} transparent={true}>
<ImageViewer imageUrls={images}/>
</Modal>
)
}
}
AppRegistry.registerComponent('myproject', () => ImageViewer);
Document
Dependence
Depend on react-native-image-pan-zoom
: https://github.com/ascoders/react-native-image-zoom