返回 导航

React / React Native

hangge.com

React Native - 使用CameraRoll获取相册图片、并显示

作者：hangge | 2017-04-11 08:10
React Native 的 CameraRoll API 提供了访问本地相册的功能，本文演示如何使用 CameraRoll 显示相册中的图片。


1，getPhotos(params)方法介绍

（1）这个是 CameraRoll 的一个静态方法，用于获取相册中的图片。
（2）参数 params 表示获取照片的参数。


2，准备工作

如果要在 iOS 上使用这个模块，我们首先要链接 RCTCameraRoll 库。同时还需要在 Info.plist 配置请求照片相册的关描述字段。
具体操作参考我上一篇文章：React Native - 使用CameraRoll将图片保存到本地相册

3，使用样例

（1）效果图
程序启动时会显示出用户最近拍摄的6张照片（相簿中日期最新的6张图片）。

（2）样例代码
import React, {Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
  CameraRoll,
} from 'react-native';

//照片获取参数
var fetchParams = {
  first: 6,
  groupTypes: 'All',
  assetType: 'Photos'
}

//默认应用的容器组件
class App extends Component {
    //构造函数
    constructor(props) {
        super(props);
        this.state = {
            photos: null
        };
    }

    //页面的组件渲染完毕（render）之后执行
    componentDidMount() {
      var _that = this;
      //获取照片
      var promise = CameraRoll.getPhotos(fetchParams)
      promise.then(function(data){
              var edges = data.edges;
              var photos = [];
              for (var i in edges) {
                  photos.push(edges[i].node.image.uri);
              }
              _that.setState({
                  photos:photos
              });
      },function(err){
          alert('获取照片失败！');
      });
    }

    //渲染
    render() {

      var photos = this.state.photos || [];
      var photosView = [];
      for(var i = 0; i < 6 ; i += 2){
        photosView.push(
          <View key={i} style={styles.row}>
            <View style={styles.flex}>
              <Image resizeMode="stretch" style={styles.image} source={{uri:photos[i]}}/>
            </View>
            <View style={styles.flex}>
              <Image resizeMode="stretch" style={styles.image} source={{uri:photos[i+1]}}/>
            </View>
          </View>
        )
      }

      return (
          <ScrollView>
            <View style={styles.container}>
              {photosView}
            </View>
          </ScrollView>
      );
    }

}

//样式定义
const styles = StyleSheet.create({
  flex:{
   flex:1
 },
 container: {
     flex: 1,
     paddingTop: 30,
     alignItems:'center'
 },
 row:{
   flexDirection: 'row'
 },
 image:{
   height: 120,
   marginTop: 10,
   marginLeft: 5,
   marginRight: 5,
   borderWidth: 1,
   borderColor: '#ddd'
 },
});

AppRegistry.registerComponent('ReactDemo', () => App);
评论

全部评论（0）

回到顶部