React Native 获取相册图片

2016-11-30 本文已影响1959人墨守青城

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 实际运行时会出现如下错误：