react-native-image-zoom-viewer学习

Posted 2020-10-09 环球移动团队

github原地址

react-native-image-zoom-viewer实现了类似微信朋友圈浏览图片的效果，点击小图片实现浏览原图效果。

安装：

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

react-native link react-native-image-zoom-viewer

代码如下：

import  ImageViewer  from ‘react-native-image-zoom-viewer‘;

import {Modal,} from‘react-native‘

{
                                this.state.imageArry.map((item, index)=> {

                                    return this._renderImage(item, index);
                                })
                            }

　　

//图片排列
    _renderImage(item, index) {
        let url = item.url;
        let source = {uri: url};
        return (
            <View style={{alignItems: ‘center‘, marginTop: 5, marginLeft: 5}} key={‘image‘ + index}>
                <TouchableOpacity onPress={this._openMax.bind(this, source, index)}>
                    <Image source={source}
                           style={styles.img}/>
                </TouchableOpacity>
            </View>
        );
    }

　　

_openMax(source, index) {
        this.setState({
            isImageShow: true,
            imageIndex: index,
        });
    }

　　

{this.state.isImageShow ?
                            <Modal visible={true} transparent={true}
                                   onRequestClose={()=> {
                                       this.setState({
                                           isImageShow: false,
                                       });
                                   }}>
                                <ImageViewer imageUrls={this.state.dataArry}
                                             onCancel={()=> {
                                                 this.setState({
                                                     isImageShow: false,
                                                 });
                                             }}
                                             index={this.state.imageIndex}
                                             saveToLocalByLongPress={false}/>
                            </Modal>
                            : null}