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

图片 预览，和保存 功能 应该是很常见的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 ( <View style={{ marginTop: (screenHeight / 2) - 20 }}> <ActivityIndicator animating={this.state.animating} size={"large"} /> </View> ) } 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 ( <View style={{ position: "absolute", top: 0, bottom: 0, left: 0, right: 0 }}> <Modal animationType={"slide"} transparent={true} visible={this.props.modalVisible} // onRequestClose={() => { this._pressSignClose() }} > <ImageViewer imageUrls={ImageObjArray} // 照片路径 enableImageZoom={true} // 是否开启手势缩放 saveToLocalByLongPress={true} //是否开启长按保存 index={this.props.curentImage} // 初始显示第几张 // failImageSource={} // 加载失败图片 loadingRender={this.renderLoad} enableSwipeDown={false} menuContext={{ "saveToLocal": "保存图片", "cancel": "取消" }} onChange={(index) => { }} // 图片切换时触发 onClick={() => { // 图片单击事件 this._Close() }} onSave={(url) => { this.savePhoto(url) }} /> </Modal> </View> ); } } 

注意：这个组件的 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

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

添加完权限之后，再把 到工程项目中的 node_module/react-native/Libraries/CameraRollC拖到我们xcode工程中，
然后在 Build Phases -> Link Binary With Libraries 里添加 libRCTCameraRoll.a 不然的话 红屏报错。

image.png

Android 保存图片请参考react native Android 图片预览 图片保存...