综合技术

react native 实现图片预览 图片保存 react-native-image-zoom-viewer

微信扫一扫,分享到朋友圈

react native 实现图片预览 图片保存 react-native-image-zoom-viewer
0 0

图片 预览,和保存 功能 应该是很常见的APP 功能 。实现起来也很简单。

这里用到的组件是: https://github.com/ascoders/react-native-image-viewer

看下新效果图:

[图片上传中...(IMG_2267.PNG-88e1c2-1531416206166-0)]

IMG_2267.PNG

IMG_2268.PNG

使用 :

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

下面代码 自己稍加修改 ,拿过去就能用

import React, { Component, PropTypes } from 'react';
import {
    View,
    Text,
    TouchableHighlight,
    StyleSheet,
    ScrollView,
    ListView,
    Image,
    Modal,
    TouchableOpacity, Dimensions,
    ActivityIndicator, CameraRoll,
} from 'react-native';

import ImageViewer from 'react-native-image-zoom-viewer';
const screenWidth = Dimensions.get("window").width;
const screenHeight = Dimensions.get("window").height;
export default class LookPhotoModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: this.props.data,
            animating: true,

        };
        this.renderLoad = this.renderLoad.bind(this);
        this.savePhoto = this.savePhoto.bind(this);
        this._Close= this._Close.bind(this);
    }
    _Close() {

        this.props.cancel();
    }
    renderLoad() { //这里是写的一个loading
        return (
            
                
            
        )
    }
    savePhoto() {
        let index = this.props.curentImage;
        let url = this.props.imaeDataUrl[index];
        let promise = CameraRoll.saveToCameraRoll(url);
        promise.then(function (result) {
           alert("已保存到系统相册")
        }).catch(function (error) {
            alert('保存失败!n' + error);
        });
    }






    render() {
        let imageData = this.props.imaeDataUrl;
        // let IsArray = Array.isArray(this.props.imaeDataUrl)
        let ImageObjArray = [];
        for (let i = 0; i < imageData.length; i++) {
            let Obj = {};
            Obj.url = imageData[i];
            ImageObjArray.push(Obj)
        }
        return (
            
                 { this._pressSignClose() }}
                >
                     { }} // 图片切换时触发
                        onClick={() => { // 图片单击事件
                            this._Close()
                        }}
                        onSave={(url) => { this.savePhoto(url) }}

                    />




                

            

        );
    }

}

注意:这个组件的 imageUrls 必须是是个对象数组 键的值 是url.

我们在用的时候 可以 把当前点击的图片下标传过来,然后就会对应显示当前图片。

保存图片使用的是 RN 的 CameraRoll

需要注意的是:(这里详细介绍下ios的使用,因为没android机,Android的话可以先下载图片到本地,然后再保存到系统相册,待更新介绍)

saveToCameraRoll(tag, type?)方法介绍

(1)这个是 CameraRoll 的一个静态方法,作用是保存一张图片到相册。

(2)参数 tag 是图片的地址,为字符串类型。其内容根据不同的设备也有所不同:

  • 在 Android 上:tag 是本地地址,例如:"file:///sdcard/img.png"
  • 在 iOS 上:tag 可以是 url、assets-library、内存图片中的一种。

(3)参数 type 不是必须的,可选值是'photo' 或 'video'。用来表示存的是图片还是视频。不指定的话程序也会根据后缀自行判断。(结尾为 .mov 或 .mp4 为视频,其它为图片)

环境:

Info.plist中添加一条名为NSPhotoLibraryUsageDescription的键,然后在其值中填写向用户请求权限的具体描述。编辑完成后这个键在Xcode中实际会显示为Privacy - Photo Library Usage Description。

image.png

//添加权限
NSPhotoLibraryUsageDescription
    XXX想访问您的相册
NSCameraUsageDescription
    XXXXX想访问您的相机

添加完权限之后,再把 到工程项目中的 node_module/react-native/Libraries/CameraRollC拖到我们xcode工程中,

然后在 Build Phases -> Link Binary With Libraries 里添加 libRCTCameraRoll.a 不然的话 红屏报错。

image.png

Android 保存图片到本地待续...

公司很注重开发人员 ,那给公司打波广告吧:

有想玩P2P又怕爆雷 的,可以用我们的买前查一查 了解p2p公司的情况,也可以通过我们平台进行导购 ,

。或者想了解更多理财方面知识的,可以关注下官方微信:

微信公众号

简书
感谢您的支持!

    新媒体运营这个岗位是这些公司永远过不去的坎

    上一篇

    香港人手机支付只占两成远远落后于内地

    下一篇

    您也可能喜欢

    评论已经被关闭。

    插入图片

    热门分类