RN-第三方之react-native-photo-view缩放单张图片

QQ20170913-182927.gif

缩放单张图片，支持手势和双击

npm install --save react-native-photo-view

rnpm link react-native-photo-view

/**
 * Created by mymac on 2017/9/13.
 */
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity

} from 'react-native';

import PhotoView from 'react-native-photo-view';

import image from './1.jpeg';

const {width , height} = Dimensions.get('window');

export default class photoView extends Component {

   constructor(props){
       super(props);

       this.showBigImage = this.showBigImage.bind(this);
       this.hideBigImage = this.hideBigImage.bind(this);

       this.state = {
           isShowImg: false
       }
   }

   showBigImage(){
       this.setState({
           isShowImg: true
       })
   }
    hideBigImage(){
        this.setState({
            isShowImg: false
        })
    }
    render() {
        return (
            

                {
                                      this.showBigImage();
                                  }}>

                    
                        点击放大图片
                    

                

                {
                    (()=>{
                        if (this.state.isShowImg)
                            return  {
                                    console.log("Image loaded!")
                                }}
                                onTap={()=>{
                                    console.log("onTap,点击图片");
                                    this.hideBigImage();
                                }}
                                onViewTap={()=>{
                                    console.log("onViewTap,点击图片外部");
                                    this.hideBigImage();
                                }}
                            />;
                        return null;

                    })()
                }

            
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    }
});

AppRegistry.registerComponent('RNProjectTestApp', () => photoView);