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 (
            <View style={styles.container}>

                <TouchableOpacity style={{
                                         height: 44,
                                         backgroundColor: 'red',
                                         alignItems: 'center',
                                        }}
                                  onPress={()=>{
                                      this.showBigImage();
                                  }}>

                    <Text style={{lineHeight: 44, textAlign: 'center'}}>
                        点击放大图片
                    </Text>

                </TouchableOpacity>

                {
                    (()=>{
                        if (this.state.isShowImg)
                            return <PhotoView
                                source={image}
                                minimumZoomScale={1}
                                maximumZoomScale={3}
                                fadeDuration={3000}
                                androidScaleType="fitXY"
                                style={{width: width, height: height, top: 0, left: 0, position: 'absolute'}}
                                onLoad={() => {
                                    console.log("Image loaded!")
                                }}
                                onTap={()=>{
                                    console.log("onTap,点击图片");
                                    this.hideBigImage();
                                }}
                                onViewTap={()=>{
                                    console.log("onViewTap,点击图片外部");
                                    this.hideBigImage();
                                }}
                            />;
                        return null;

                    })()
                }

            </View>
        );
    }
}

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

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