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:简书 (源链)。感谢您的支持!

您可能感兴趣的

Flutter for React Native Developers Flutter is a new cross-platform mobile SDK by Google for building awesome apps ...
Why should you use Realm as the local database in ... React native is awesome, no doubt there. It is highly performant and can do wond...
Isomorphic Asset System for React and React-Native Proudly introducing our latest Open Source project, Asset System ...
ReactNative实现Toast 对于Android开发工程师来说,Toast在熟悉不过了,用它来显示一个提示信息,并自动隐藏。在我们开发RN应用的时候,我门也要实现这样的效果,就一点困难了,倒...
学习 React Native for Android:环境搭建 Facebook 于 2015 年 9 月 15 日发布了 React Native for Android 。React Native 让开发者使用 Jav...