CameraRoll

参考文档

CameraRoll模块提供了访问本地相册的功能。在 iOS 上使用这个模块之前，你需要先链接RCTCameraRoll库，具体做法请参考链接原生库文档。

译注：

本模块只提供了基本的访问图片的功能，并没有提供相册界面。对于多数开发者来说，可能第三方的react-native-image-crop-picker的功能更为完整易用（可多选、压缩、裁剪等）。

权限

从 iOS 10 开始，访问相册需要用户授权。你需要在Info.plist中添加一条名为NSPhotoLibraryUsageDescription的键，然后在其值中填写向用户请求权限的具体描述。编辑完成后这个键在 Xcode 中实际会显示为Privacy - Photo Library Usage Description。

从 iOS 11 开始，如果需要保存图片，则需要额外申请用户授权。你需要在Info.plist中添加一条名为NSPhotoLibraryAddUsageDescription的键，然后在其值中填写向用户请求权限的具体描述。编辑完成后这个键在 Xcode 中实际会显示为Privacy - Photo Library Additions Usage Description。而名为NSPhotoLibraryUsageDescription的键此时仅控制相册的读取。具体说明请翻阅官方文档搜索相关键值。

方法

saveToCameraRoll()

CameraRoll.saveToCameraRoll(tag, [type]);

保存一个图片或视频到相册或图库。

在 Android 上，tag 是一个本地 URI，例如"file:///sdcard/img.png".

在 iOS， tag 可以是任意图片 URI（本地或是远程 asset-library、base64），也可以是本地视频文件的 URI（远程和 base64 目前还不支持）

如果标签的文件扩展名为.mov或.mp4，则会将其推断为视频。 否则，它将被视为照片。 要覆盖自动选择，您可以传递一个可选的type参数，该参数必须是“ photo”或“ video”之一。 返回一个 Promise，操作成功时解析出新的 URI。

getPhotos()

CameraRoll.getPhotos(params);

从与getPhotosReturnChecker定义的形状匹配的设备的本地相机胶卷中返回带有照片标识符对象的Promise。

• first : 以与照片应用程序相反的顺序想要的照片数量（即，“ SavedPhotos”的最新照片数量）。
• after : {string}：与上一次调用getPhotos返回的page_info {end_cursor}相匹配的游标。
• groupTypes : {string}：指定要将结果过滤到的组类型。有效值为:
  • Album
  • All
  • Event
  • Faces
  • Library
  • PhotoStream
  • SavedPhotos // default
• groupName : {string} : 指定组名称的过滤器，例如“最近的照片”或自定义相册标题。.
• assetType : {string} : 指定资产类型的过滤器。有效值为：
  • All
  • Videos
  • Photos // default
• mimeTypes : 按mimetype过滤（例如image / jpeg）。

返回一个Promise，具有以下形状. :

• edges : {Array}节点对象的数组
  • node: {object} 具有以下形状的对象:
    • type: {string}
    • group_name: {string}
    • image: {object} : 具有以下形状的对象:
      • uri: {string}
      • height: {number}
      • width: {number}
      • isStored: {boolean}
      • playableDuration: {number}
  • timestamp: {number}
  • location: {object} : 具有以下形状的对象:
    • latitude: {number}
    • longitude: {number}
    • altitude: {number}
    • heading: {number}
    • speed: {number}
• page_info : {object} : 具有以下形状的对象:
  • has_next_page: {boolean}
  • start_cursor: {string}
  • end_cursor: {string}

Example

示例

import React from 'react';
import {Button, ScrollView,Image,View} from 'react-native';

import CameraRoll from '@react-native-community/cameraroll'


export default class App extends React.Component {
    constructor(){
        super();
        this.state= {
            photos: []
        }

    }
    _handleButtonPress = () => {
        CameraRoll.getPhotos({
            first: 20,
            assetType: 'Photos',
        })
            .then(r => {
                this.setState({photos: r.edges});
            })
            .catch((err) => {
                //Error Loading Images
            });
    };

    render() {
        return (
            <View style={{marginTop:100}}>
                <Button title="Load Images" onPress={this._handleButtonPress}/>
                <ScrollView>
                    {this.state.photos.map((p, i) => {
                        return (
                            <Image
                                key={i}
                                style={{
                                    width: 300,
                                    height: 100,
                                }}
                                source={{uri: p.node.image.uri}}
                            />
                        );
                    })}
                </ScrollView>
            </View>
        );
    }
}