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

综合技术 2018-07-13 阅读原文

图片 预览,和保存 功能 应该是很常见的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公司的情况,也可以通过我们平台进行导购 ,

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

微信公众号

简书

责编内容by:简书阅读原文】。感谢您的支持!

您可能感兴趣的

ReactNative模仿网易云音乐手机客户端,兼容安卓和IOS两个平台... 音乐播放 视频播放 歌曲列表 用户界面 电台详情 主要的技术栈和依赖第三方库: 点击名称可跳转相关项目网站:smile::smile: ...
React Native Snoopy, a profiling tool for React Na... The React Native bridge is the hub where communication between the Javascript and the Native world happen. Optimizi...
5 Reasons Why I Love React Native React Native is very popular these days, and thousands of apps are already built using React Native. ...
Segment integrations with redux on react and react... Does anyone use segment for data analytics? Segment is the infrastructure for gathering customer data. And...
React Native Deeplink App 一般都支持类似 coolflight://list 这样的链接,可以直接打开 app 并打开列表,这个就是 deeplink。 这个需要对 native 代码做一些修改,可以参考 这里 的修改,ios 和 a...