Skip to content

Commit

Permalink
Update README.
Browse files Browse the repository at this point in the history
  • Loading branch information
Xiaosong Gao committed Jan 3, 2019
1 parent d9e4537 commit e95e206
Showing 1 changed file with 52 additions and 15 deletions.
67 changes: 52 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# react-native-full-image-picker

[![npm version](https://img.shields.io/npm/v/react-native-full-image-picker.svg?style=flat)](https://www.npmjs.com/package/react-native-full-image-picker)
[![Build Status](https://travis-ci.org/gaoxiaosong/react-native-full-image-picker.svg?branch=master)](https://travis-ci.org/gaoxiaosong/react-native-full-image-picker)

[中文说明](https://www.jianshu.com/p/4f7296753013)

Expand Down Expand Up @@ -43,12 +44,12 @@ Install by NPM:
npm install --save react-native-full-image-picker
```

You should also install native code of these libraries:
**NOTICE**: This library has no native code for iOS and Android. But you should also install native code of these libraries:

* [CameraRoll](https://facebook.github.io/react-native/docs/cameraroll)
* [react-native-camera](https://github.com/react-native-community/react-native-camera)
* [react-native-video](https://github.com/react-native-community/react-native-video)
* [react-native-fs](https://github.com/itinance/react-native-fs)
* [CameraRoll](https://facebook.github.io/react-native/docs/cameraroll): Used to get all photos in camera roll or photo library.
* [react-native-camera](https://github.com/react-native-community/react-native-camera): Used to show camera in view.
* [react-native-video](https://github.com/react-native-community/react-native-video): Used to preview the video.
* [react-native-fs](https://github.com/itinance/react-native-fs): Used to copy generated photo or video to a temporary place.

## Usage

Expand All @@ -60,28 +61,64 @@ import * as ImagePicker from 'react-native-full-image-picker';

It has three method:

* `ImagePicker.getCamera(options)`: Take photo.
* `ImagePicker.getVideo(options)`: Video recording.
* `ImagePicker.getAlbum(options)`: Select from photo library.
* `ImagePicker.getCamera(options)`: Take photo from camera. (Camera Mode)
* `ImagePicker.getVideo(options)`: Video recording. (Video Mode)
* `ImagePicker.getAlbum(options)`: Select photo or video from photo library. (Photo Mode)

`options` is a object with these settings:

* `callback: (data: any[]) => void`: Callback method with photo or video array. Do not use `Alert` in it.
* `maxSize?: number`: The maximum number of photo count. Valid in camera or photo library.
* `callback: (data: any[]) => void`: Callback method with photo or video array. `data` is an uri array of photo or video. Do not use `Alert` in this callback method.
* `maxSize?: number`: The maximum number of photo count. Valid in camera or photo library mode.
* `sideType?: RNCamera.Constants.Type`: Side of camera, back or front. Valid in camera or video.
* `flashMode?: RNCamera.Constants.FlashMode`: Flash mode. Valid in camera or video.

You can use [react-native-general-actionsheet](https://github.com/gaoxiaosong/react-native-general-actionsheet) to show `ActionSheet` by same API and UI with `ActionSheetIOS`.

## Change Label
## Change Default Property

You can import page and change `defaultProps` to modify labels globally:
You can import page and change `defaultProps` to modify settings globally:

```jsx
import * as ImagePicker from 'react-native-full-image-picker';

ImagePicker.XXXPage.defaultProps.xxx = yyy;
ImagePicker.XXXView.defaultProps.xxx = yyy;
ImagePicker.XXX.defaultProps.yyy = ...;
```

The `XXXPage` or `XXXView` is the export items of library. And you can see source code to modify its `defaultProps` value.
The `XXX` is the export items of library. Following is the detail.

### PhotoModalPage

This is the outter navigator for all modes. You can change these properties of `defaultProps`:

| Name | Type | Description |
| :-: | :-: | :- |
| okLabel | string | OK button text |
| cancelLabel | string | Cancel button text |
| deleteLabel | string | Delete button text
| useVideoLabel | string | UseVideo button text |
| usePhotoLabel | string | UsePhoto button text |
| previewLabel | string | Preview button text |
| choosePhotoTitle | string | ChoosePhoto page title |
| maxSizeChooseAlert | (num: number) => string | Max size limit alert message when choosing photos |
| maxSizeTakeAlert | (num: number) => string | Max size limit alert message when taking photos from camera |

### CameraView

This is page for taking photos from camera or recording video. You can change these properties of `defaultProps`:

| Name | Type | Description |
| :-: | :-: | :- |
| maxSize | number | Default max number limit |
| sideType | RNCamera.Constants.Type | Camera side type. Default is `back` |
| flashMode | RNCamera.Constants.FlashMode | Flash mode. Default is `off` |

### AlbumListView

This is page for selecting photo from photo library. You can change these properties of `defaultProps`:

| Name | Type | Description |
| :-: | :-: | :- |
| maxSize | number | Default max number limit |
| autoConvertPath | boolean | Auto copy photo or not to convert file path to standard file path. Default is `false` |
| assetType | string | Asset type. Please see [CameraRoll Docs](https://facebook.github.io/react-native/docs/cameraroll) |
| groupTypes | string | Group type. Please see [CameraRoll Docs](https://facebook.github.io/react-native/docs/cameraroll) |

0 comments on commit e95e206

Please sign in to comment.