@react-native-community/cameraroll

2020-02-13

@react-native-community/cameraroll

React Native Camera Roll for iOS & Android

@react-native-community/cameraroll

CircleCI StatusSupports Android and iOSMIT LicenseLean Core Badge

Getting started

$ npm install @react-native-community/cameraroll --save

Mostly automatic installation

$ react-native link @react-native-community/cameraroll && cd ios && pod install

Manual installation

iOS

  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modules@react-native-community/camerarolland add RNCCameraroll.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRNCCameraroll.ato your project's Build PhasesLink Binary With Libraries
  4. Run your project (Cmd+R)<

Android

  1. Open up android/app/src/main/java/[...]/MainApplication.java
  • Add import com.reactnativecommunity.cameraroll.CameraRollPackage;to the imports at the top of the file
  • Add new CameraRollPackage()to the list returned by the getPackages()method
  1. Append the following lines to android/settings.gradle:

    include ':@react-native-community_cameraroll'
    project(':@react-native-community_cameraroll').projectDir = new File(rootProject.projectDir,     '../node_modules/@react-native-community/cameraroll/android')
    
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:

    compile project(':@react-native-community_cameraroll')
    

Migrating from the core react-nativemodule

This module was created when the CameraRoll was split out from the core of React Native. To migrate to this module you need to follow the installation instructions above and then change you imports from:

import { CameraRoll } from "react-native";

to:

import CameraRoll from "@react-native-community/cameraroll";

Usage

CameraRollprovides access to the local camera roll or photo library.

Permissions

The user's permission is required in order to access the Camera Roll on devices running iOS 10 or later. Add the NSPhotoLibraryUsageDescriptionkey in your Info.plistwith a string that describes how your app will use this data. This key will appear as Privacy - Photo Library Usage Descriptionin Xcode.

If you are targeting devices running iOS 11 or later, you will also need to add the NSPhotoLibraryAddUsageDescriptionkey in your Info.plist. Use this key to define a string that describes how your app will use this data. By adding this key to your Info.plist, you will be able to request write-only access permission from the user. If you try to save to the camera roll without this permission, your app will exit.

On Android permission is required to read the external storage. Add below line to your manifest to request this permission on app install.

<manifest>
...
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
...
<application>

Methods

  • saveToCameraRoll
  • save
  • getAlbums
  • getPhotos
  • deletePhotos

Reference

Methods

save()

Saves the photo or video of a particular type to an album. This function works the same as saveToCameraRoll, but it allows to specify a particular album you want to store the asset to.

CameraRoll.save(tag, { type, album })

saveToCameraRoll()

CameraRoll.saveToCameraRoll(tag, [type]);

Saves the photo or video to the photo library.

On Android, the tag must be a local image or video URI, such as "file:///sdcard/img.png".

On iOS, the tag can be any image URI (including local, remote asset-library and base64 data URIs) or a local video file URI (remote or data URIs are not supported for saving video at this time).

If the tag has a file extension of .mov or .mp4, it will be inferred as a video. Otherwise it will be treated as a photo. To override the automatic choice, you can pass an optional typeparameter that must be one of 'photo' or 'video'.

Returns a Promise which will resolve with the new URI.

Parameters:

NameTypeRequiredDescription
tagstringYesSee above.
typeenum('photo', 'video')NoOverrides automatic detection based on the file extension.

getAlbums()

CameraRoll.getAlbums(params);

Returns a Promise with a list of albums

Parameters:

  • assetType: {string} : Specifies filter on asset type. Valid values are:
    • All// default
    • Videos
    • Photos

Returns:

Array of Albumobject

  • title: {string}
  • count: {number}

getPhotos()

CameraRoll.getPhotos(params);

Returns a Promise with photo identifier objects from the local camera roll of the device matching shape defined by getPhotosReturnChecker.

Parameters:

NameTypeRequiredDescription
paramsobjectYesExpects a params with the shape described below.
  • first: {number} : The number of photos wanted in reverse order of the photo application (i.e. most recent first for SavedPhotos). Required.
  • after: {string} : A cursor that matches page_info { end_cursor }returned from a previous call to getPhotos.
  • groupTypes: {string} : Specifies which group types to filter the results to. Valid values are:
    • Album
    • All// default
    • Event
    • Faces
    • Library
    • PhotoStream
    • SavedPhotos
  • groupName: {string} : Specifies filter on group names, like 'Recent Photos' or custom album titles.
  • assetType: {string} : Specifies filter on asset type. Valid values are:
    • All
    • Videos
    • Photos// default
  • mimeTypes: {Array} : Filter by mimetype (e.g. image/jpeg).
  • fromTime: {timestamp} : Filter from date added.
  • toTime: {timestamp} : Filter to date added.

Returns a Promise which when resolved will be of the following shape:

  • edges: {Array} An array of node objects
    • node: {object} An object with the following shape:
      • type: {string}
      • group_name: {string}
      • image: {object} : An object with the following shape:
        • uri: {string}
        • filename: {string}
        • height: {number}
        • width: {number}
        • isStored: {boolean}
        • playableDuration: {number}
      • timestamp: {number}
      • location: {object} : An object with the following shape:
        • latitude: {number}
        • longitude: {number}
        • altitude: {number}
        • heading: {number}
        • speed: {number}
  • page_info: {object} : An object with the following shape:
    • has_next_page: {boolean}
    • start_cursor: {string}
    • end_cursor: {string}

Example

Loading images:

_handleButtonPress = () => {
   CameraRoll.getPhotos({
       first: 20,
       assetType: 'Photos',
     })
     .then(r => {
       this.setState({ photos: r.edges });
     })
     .catch((err) => {
        //Error Loading Images
     });
   };
render() {
 return (
   <View>
     <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>
 );
}

deletePhotos()

CameraRoll.deletePhotos([uri]);

Requests deletion of photos in the camera roll.

On Android, the uri must be a local image or video URI, such as "file:///sdcard/img.png".

On iOS, the uri can be any image URI (including local, remote asset-library and base64 data URIs) or a local video file URI. The user is presented with a dialog box that shows them the asset(s) and asks them to confirm deletion. This is not able to be bypassed as per Apple Developer guidelines.

Returns a Promise which will resolve when the deletion request is completed, or reject if there is a problem during the deletion. On iOS the user is able to cancel the deletion request, which causes a rejection, while on Android the rejection will be due to a system error.

Parameters:

NameTypeRequiredDescription
uristringYesSee above.

以上是 @react-native-community/cameraroll 的使用教程帮助文档。

  • @react-native-community/cameraroll官网:官网
  • @react-native-community/cameraroll源码仓库:源码仓库

上一篇:@gutenye/antd-mobile
下一篇:理解javascript装饰器
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章
暂无相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部