React Native中的CameraRoll模块提供了访问本地相册的功能。
1.要使用CameraRoll模块,首先需要导入模块。
import React, { Component } from 'react';
import { CameraRoll } from 'react-native';
2.通过getPhotoParams获取图片
getPhotoParams方法接收一个object作为参数,参数中可以包含以下信息:
first:数字类型,想要逆序显示的照片数目(即最新保存的照片)
after:字符串类型,一个匹配前一次调用getPhotos的page_info{ end_cursor}信息的指针。
groupTypes:字符串类型,指定特定的组别来过滤结果,可能是Album、All、Event等值。完整的GroupTypes可在源码中查看。
groupName:字符串类型,在改组指定一个过滤器,例如Recent Photos或一个相册名称。
AssetType: 值为All,Photos 或Videos的其中一个,为资源类型指定一个过滤器。
mimeTypes:字符串数组类型,基于MIME类型进行过滤(例如:iamge/jpeg)。
如下代码可在组件加载时获取相册数据:
var CameraRollDemo = React.createClass({
getInitialState(){
return {
//定义state保存资源路径
photoSource: null
}
},
// 控件加载时获取图片
componentDidMount(){
//保存this 用于处理回调
var _that = this;
CameraRoll.getPhotos(
{first:5}//参数 获取最近五张图片
).done(
function (data) { //成功的回调
console.log(data);
var edges = data.edges;
var photos = [];
for (var i in edges) {
photos.push(edges[i].node.image.uri);
}
_that.setState({
//通过打印的object,找到如下图片路径
photoSource: {uri: data.edges[3].node.image.uri}
});
},
function (error) { //失败的回调
console.log(error.message);
}
)
},
render() {
return (
// 取出的图片作为页面的背景图
<Image
style={styles.container}
source={this.state.photoSource}
resizeMode='cover'
/>
);
}
});
but 实际运行时会出现如下错误:
由于找不着getPhotos方法而报错。原因是在我们的原生项目中并没有导入CameraRoll的模块,在项目的Libraries文件夹下可以看到只导入了基本的模块。
3.手动导入RCTCameraRoll.xcodeproj
在Xcode中打开项目, 在Libraries上单击右键,然后选的Add Files to ...
接着,添加RCTCameraRoll.xcodeproj文件到工程中。
同时也需要在Link Binary With Libraries 菜单中加入libRCTVideo.a到工程中。
4.不要忘记在info.plist文件中配置访问相册的权限。
一切配置完成之后,重新运行效果如下: