Expo ImagePicker

一个提供系统界面访问能力的库，可用于从手机图库中选择图像和视频，或使用相机拍照。

Android

iOS

Web

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~58.0.1

expo-image-picker 可访问系统界面，让用户从手机图库中选择图像和视频，或使用相机拍照。

已知问题
iOS

在 iOS 上，从相机胶卷中选择图像时（通常为更高分辨率的图像），在某些情况下，裁剪后图像的裁剪矩形会返回错误的值。遗憾的是，此问题源于 iOS 内置闭源工具中的错误，影响了底层的 UIImagePickerController。

安装

Terminal

- npx expo install expo-image-picker

- yarn expo install expo-image-picker

- pnpm expo install expo-image-picker

- bun expo install expo-image-picker

If you are installing this in an existing React Native app, make sure to install expo in your project.

在应用配置中配置

如果项目中使用了 config plugins（持续原生生成（CNG）），则可以使用内置的配置插件配置 expo-image-picker。该插件允许配置各种无法在运行时设置的属性，这些属性需要重新构建应用二进制文件才能生效。如果应用未使用 CNG，则需要手动配置此库。

默认情况下，expo-image-picker 会在 Android 上添加 RECORD_AUDIO 权限。可以在下方配置中将 microphonePermission 设为 false 来移除该权限。

Example app.json with config plugin

app.json

{
  "expo": {
    "plugins": [
      [
        "expo-image-picker",
        {
          "photosPermission": "The app accesses your photos to let you share them with your friends.",
          "colors": {
            "cropToolbarColor": "#000000"
          },
          "dark": {
            "colors": {
              "cropToolbarColor": "#000000"
            }
          }
        }
      ]
    ]
  }
}

Configurable properties

Name	Default	Description
`photosPermission`	`"Allow $(PRODUCT_NAME) to access your photos"`	Only for: iOS 用于设置 `NSPhotoLibraryUsageDescription` 权限说明信息的字符串。
`cameraPermission`	`"Allow $(PRODUCT_NAME) to access your camera"`	用于设置 `NSCameraUsageDescription` 权限说明信息的字符串。如果提供的值为 `false`，则会在 Android 上禁用 `CAMERA` 权限。
`microphonePermission`	`"Allow $(PRODUCT_NAME) to access your microphone"`	用于设置 `NSMicrophoneUsageDescription` 权限说明信息的字符串。如果提供的值为 `false`，则会在 Android 上禁用 `RECORD_AUDIO` 权限。
`colors`	`undefined`	Only for: Android 包含颜色属性的对象，用于自定义浅色模式下图像选择器的裁剪界面。
`colors.cropToolbarColor`	`#00000000`	Only for: Android 用于设置裁剪工具栏背景颜色的十六进制颜色字符串。
`colors.cropToolbarIconColor`	`#000000`	Only for: Android 用于设置裁剪工具栏图标颜色的十六进制颜色字符串。
`colors.cropToolbarActionTextColor`	`#000000`	Only for: Android 用于设置裁剪工具栏操作文字颜色的十六进制颜色字符串。
`colors.cropBackButtonIconColor`	`#000000`	Only for: Android 用于设置裁剪工具栏返回按钮图标颜色的十六进制颜色字符串。
`colors.cropBackgroundColor`	`#ffffff`	Only for: Android 用于设置裁剪屏幕背景颜色的十六进制颜色字符串。
`dark.colors`	`{ cropToolbarColor: "#00000000", cropToolbarIconColor: "#ffffff", cropToolbarActionTextColor: "#ffffff", cropBackButtonIconColor: "#ffffff", cropBackgroundColor: "#000000" }`	Only for: Android 包含颜色属性的对象，用于自定义深色模式下图像选择器的裁剪界面。

Are you using this library in an existing React Native app?

如果未使用持续原生生成（CNG），或者手动使用原生 ios 项目，则需要将 NSPhotoLibraryUsageDescription、NSCameraUsageDescription 和 NSMicrophoneUsageDescription 键添加到 ios/[app]/Info.plist 中：

Info.plist

<key>NSPhotoLibraryUsageDescription</key>
<string>Give $(PRODUCT_NAME) permission to save photos</string>
<key>NSCameraUsageDescription</key>
<string>Give $(PRODUCT_NAME) permission to access your camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>Give $(PRODUCT_NAME) permission to use your microphone</string>

使用

Image Picker

import { useState } from 'react';
import { Alert, Button, Image, View, StyleSheet } from 'react-native';
import * as ImagePicker from 'expo-image-picker';

export default function ImagePickerExample() {
  const [image, setImage] = useState<string | null>(null);

  const pickImage = async () => {
    // No permissions request is necessary for launching the image library.
    // Manually request permissions for videos on iOS when `allowsEditing` is set to `false`
    // and `videoExportPreset` is `'Passthrough'` (the default), ideally before launching the picker
    // so the app users aren't surprised by a system dialog after picking a video.
    // See "Invoke permissions for videos" sub section for more details.
    const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();

    if (!permissionResult.granted) {
      Alert.alert('Permission required', 'Permission to access the media library is required.');
      return;
    }

    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ['images', 'videos'],
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    console.log(result);

    if (!result.canceled) {
      setImage(result.assets[0].uri);
    }
  };

  const takePhoto = async () => {
    // Camera access always requires the user's permission.
    // Taking a photo also requires a device with a camera. The iOS Simulator
    // does not have one, so use a physical device to test this button.
    const permissionResult = await ImagePicker.requestCameraPermissionsAsync();

    if (!permissionResult.granted) {
      Alert.alert('Permission required', 'Permission to access the camera is required.');
      return;
    }

    let result = await ImagePicker.launchCameraAsync({
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    console.log(result);

    if (!result.canceled) {
      setImage(result.assets[0].uri);
    }
  };

  return (
    <View style={styles.container}>
      <Button title="Pick an image from camera roll" onPress={pickImage} />
      <Button title="Take a photo" onPress={takePhoto} />
      {image && <Image source={{ uri: image }} style={styles.image} />}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: 200,
    height: 200,
  },
});

运行此示例并选择图像后，所选图像会显示在应用中，控制台中也会显示类似的日志：

{
  "assets": [
    {
      "assetId": "C166F9F5-B5FE-4501-9531",
      "base64": null,
      "duration": null,
      "exif": null,
      "fileName": "IMG.HEIC",
      "fileSize": 6018901,
      "height": 3025,
      "type": "image",
      "uri": "file:///data/user/0/host.exp.exponent/cache/cropped1814158652.jpg"
      "width": 3024
    }
  ],
  "canceled": false
}

调用视频权限
iOS

在 SDK 54 及更高版本中，默认配置会将 allowsEditing 设为 false，并将 videoExportPreset 设为 'Passthrough'。这些设置会立即返回原始资源（包括 HEIC 和 AVIF 文件），因为选择器会跳过压缩；但 iOS 需要媒体图库权限才能访问原始文件，并会在用户选择视频后立即显示权限对话框。

若要避免在选择后显示权限对话框，请在打开选择器前通过 requestMediaLibraryPermissionsAsync 或 useMediaLibraryPermissions 手动请求媒体图库权限。

使用 AWS S3

AWS storage example

可以在 with-aws-storage-upload 中找到如何使用 AWS 存储的示例。

请参阅 Amplify 文档指南，正确设置项目。

使用 Firebase

Firebase storage example

可以在 with-firebase-storage-upload 中找到如何使用 Firebase 存储的示例。

请参阅使用 Firebase指南，正确设置项目。

API

import * as ImagePicker from 'expo-image-picker';

Hooks

`useCameraPermissions(options)`

Android

iOS

Web

Parameter	Type
options(optional)	`PermissionHookOptions<object>`

Check or request permissions to access the camera. This uses both requestCameraPermissionsAsync and getCameraPermissionsAsync to interact with the permissions.

Returns:

[PermissionResponse | null, RequestPermissionMethod<PermissionResponse>, GetPermissionMethod<PermissionResponse>]

Example

const [status, requestPermission] = ImagePicker.useCameraPermissions();

`useMediaLibraryPermissions(options)`

Android

iOS

Web

Parameter	Type
options(optional)	`PermissionHookOptions<{ writeOnly: boolean }>`

Check or request permissions to access the media library. This uses both requestMediaLibraryPermissionsAsync and getMediaLibraryPermissionsAsync to interact with the permissions.

Returns:

[MediaLibraryPermissionResponse | null, RequestPermissionMethod<MediaLibraryPermissionResponse>, GetPermissionMethod<MediaLibraryPermissionResponse>]

Example

const [status, requestPermission] = ImagePicker.useMediaLibraryPermissions();

Methods

`ImagePicker.getCameraPermissionsAsync()`

Android

iOS

Web

Checks user's permissions for accessing camera.

Returns:

Promise<PermissionResponse>

A promise that fulfills with an object of type CameraPermissionResponse.

`ImagePicker.getMediaLibraryPermissionsAsync(writeOnly)`

Android

iOS

Web

Parameter	Type	Description
writeOnly(optional)	`boolean`	Whether to request write or read and write permissions. Defaults to `false` Default:`false`

Checks user's permissions for accessing photos.

Returns:

Promise<MediaLibraryPermissionResponse>

A promise that fulfills with an object of type MediaLibraryPermissionResponse.

`ImagePicker.getPendingResultAsync()`

Android

iOS

Web

Android system sometimes kills the MainActivity after the ImagePicker finishes. When this happens, we lose the data selected using the ImagePicker. However, you can retrieve the lost data by calling getPendingResultAsync. You can test this functionality by turning on Don't keep activities in the developer options.

Returns:

Promise<ImagePickerErrorResult | ImagePickerResult | null>

On Android: a promise that resolves to an object of exactly same type as in ImagePicker.launchImageLibraryAsync or ImagePicker.launchCameraAsync if the ImagePicker finished successfully. Otherwise, an object of type ImagePickerErrorResult.
On other platforms: null

`ImagePicker.launchCameraAsync(options)`

Android

iOS

Web

Parameter	Type	Description
options(optional)	`ImagePickerOptions`	An `ImagePickerOptions` object. Default:`{}`

Display the system UI for taking a photo with the camera. Requires Permissions.CAMERA. On Android and iOS 10 Permissions.CAMERA_ROLL is also required. On mobile web, this must be called immediately in a user interaction like a button press, otherwise the browser will block the request without a warning.

Note: Make sure that you handle MainActivity destruction on Android. See ImagePicker.getPendingResultAsync. Notes for Web: The system UI can only be shown after user activation (e.g. a Button press). Therefore, calling launchCameraAsync in componentDidMount, for example, will not work as intended. The cancelled event will not be returned in the browser due to platform restrictions and inconsistencies across browsers.

Returns:

Promise<ImagePickerResult>

A promise that resolves to an object with canceled and assets fields. When the user canceled the action the assets is always null, otherwise it's an array of the selected media assets which have a form of ImagePickerAsset.

`ImagePicker.launchImageLibraryAsync(options)`

Android

iOS

Web

Parameter	Type	Description
options(optional)	`ImagePickerOptions`	An object extended by `ImagePickerOptions`. Default:`{}`

Display the system UI for choosing an image or a video from the phone's library. Requires Permissions.MEDIA_LIBRARY on iOS 10 only. On mobile web, this must be called immediately in a user interaction like a button press, otherwise the browser will block the request without a warning.

Animated GIFs support: On Android, if the selected image is an animated GIF, the result image will be an animated GIF too if and only if quality is explicitly set to 1.0 and allowsEditing is set to false. Otherwise compression and/or cropper will pick the first frame of the GIF and return it as the result (on Android the result will be a PNG). On iOS, both quality and cropping are supported.

Notes for Web: The system UI can only be shown after user activation (e.g. a Button press). Therefore, calling launchImageLibraryAsync in componentDidMount, for example, will not work as intended. The cancelled event will not be returned in the browser due to platform restrictions and inconsistencies across browsers.

Returns:

Promise<ImagePickerResult>

`ImagePicker.requestCameraPermissionsAsync()`

Android

iOS

Web

Asks the user to grant permissions for accessing camera. This does nothing on web because the browser camera is not used.

Returns:

Promise<PermissionResponse>

A promise that fulfills with an object of type CameraPermissionResponse.

`ImagePicker.requestMediaLibraryPermissionsAsync(writeOnly)`

Android

iOS

Web

Parameter	Type	Description
writeOnly(optional)	`boolean`	Whether to request write or read and write permissions. Defaults to `false` Default:`false`

Asks the user to grant permissions for accessing user's photo. This method does nothing on web.

Returns:

Promise<MediaLibraryPermissionResponse>

A promise that fulfills with an object of type MediaLibraryPermissionResponse.

Types

`CameraPermissionResponse`

Android

iOS

Web

Type: PermissionResponse

Alias for PermissionResponse type exported by expo-modules-core.

`CropShape`

Android

iOS

Web

Literal type: string

The shape of the crop area.

Acceptable values are: 'rectangle' | 'oval'

`DefaultTab`

Android

Literal type: string

The default tab with which the image picker will be opened.

'photos' - the photos/videos tab will be opened.
'albums' - the albums tab will be opened.

Acceptable values are: 'photos' | 'albums'

`ImagePickerAsset`

Android

iOS

Web

Represents an asset (image or video) returned by the image picker or camera.

Property	Type	Description
assetId(optional)	`string \| null`	Only for: Android iOS The unique ID that represents the picked image or video, if picked from the library. It can be used by expo-media-library to manage the picked asset. This might be `null` when the ID is unavailable or the user gave limited permission to access the media library. On Android, the ID is unavailable when the user selects a photo by directly browsing file system.
base64(optional)	`string \| null`	When the `base64` option is truthy, it is a Base64-encoded string of the selected image's JPEG data, otherwise `null`. If you prepend this with `'data:image/jpeg;base64,'` to create a data URI, you can use it as the source of an `Image` element; for example: `<Image source={{ uri: 'data:image/jpeg;base64,' + asset.base64 }} style={{ width: 200, height: 200 }} />`
duration(optional)	`number \| null`	Length of the video in milliseconds or `null` if the asset is not a video.
exif(optional)	`Record<string, any> \| null`	Only for: Android iOS The `exif` field is included if the `exif` option is truthy, and is an object containing the image's EXIF data. The names of this object's properties are EXIF tags and the values are the respective EXIF values for those tags.
file(optional)	`File`	Only for: Web The web `File` object containing the selected media. This property is web-only and can be used to upload to a server with `FormData`.
fileName(optional)	`string \| null`	Preferred filename to use when saving this item. This might be `null` when the name is unavailable or user gave limited permission to access the media library.
fileSize(optional)	`number`	File size of the picked image or video, in bytes.
height	`number`	Height of the image or video. Can be `0` if the system did not provide the height.
mimeType(optional)	`string`	The MIME type of the selected asset or `null` if could not be determined.
pairedVideoAsset(optional)	`ImagePickerAsset \| null`	Only for: iOS Contains information about the video paired with the image file. This property is only set when `livePhotos` media type was present in the `mediaTypes` array when launching the picker and a live photo was selected.
type(optional)	`'image' \| 'video' \| 'livePhoto' \| 'pairedVideo' \| null`	The type of the asset. `'image'` - for images. `'video'` - for videos. `'livePhoto'` - for live photos. (iOS only) `'pairedVideo'` - for videos paired with photos, which can be combined to create a live photo. (iOS only) `null` - when the type could not be determined. This is rare but can happen with some Android ContentProviders.
uri	`string`	URI to the local image or video file (usable as the source of an `Image` element, in the case of an image) and `width` and `height` specify the dimensions of the media.
width	`number`	Width of the image or video. Can be `0` if the system did not provide the width.

`ImagePickerCanceledResult`

Android

iOS

Web

Type representing canceled pick result.

Property	Type	Description
assets	`null`	`null` signifying that the request was canceled.
canceled	`true`	Boolean flag set to `true` showing that the request was canceled.

`ImagePickerErrorResult`

Android

iOS

Web

Property	Type	Description
code	`string`	The error code.
exception(optional)	`string`	The exception which caused the error.
message	`string`	The error message.

`ImagePickerOptions`

Android

iOS

Web

Property	Type	Description
allowsEditing(optional)	`boolean`	Only for: Android iOS Whether to show a UI to edit the image after it is picked. On Android the user can crop and rotate the image and on iOS simply crop it. Cropping multiple images is not supported - this option is mutually exclusive with `allowsMultipleSelection`. On iOS, this option is ignored if `allowsMultipleSelection` is enabled. On iOS cropping a `.bmp` image will convert it to `.png`. Default:`false`
allowsMultipleSelection(optional)	`boolean`	Only for: Android iOS 14+ Web Whether or not to allow selecting multiple media files at once. Cropping multiple images is not supported - this option is mutually exclusive with `allowsEditing`. If this option is enabled, then `allowsEditing` is ignored. Default:`false`
aspect(optional)	`[number, number]`	An array with two entries `[x, y]` specifying the aspect ratio to maintain if the user is allowed to edit the image (by passing `allowsEditing: true`). This is only applicable on Android, since on iOS the crop rectangle is always a square.
base64(optional)	`boolean`	Whether to also include the image data in Base64 format.
cameraType(optional)	`CameraType`	Selects the camera-facing type. The `CameraType` enum provides two options: `front` for the front-facing camera and `back` for the back-facing camera. On Android, the behavior of this option may vary based on the camera app installed on the device. On Web, if this option is not provided, use "camera" as the default value of internal input element for backwards compatibility. Default:`CameraType.back`
defaultTab(optional)	`DefaultTab`	Only for: Android Choose the default tab with which the image picker will be opened. Default:`'photos'`
exif(optional)	`boolean`	Only for: Android iOS Whether to also include the EXIF data for the image. On iOS the EXIF data does not include GPS tags in the camera case.
legacy(optional)	`boolean`	Only for: Android Uses the legacy image picker on Android. This will allow media to be selected from outside the users photo library. Default:`false`
mediaTypes(optional)	`MediaType \| MediaType[] \| MediaTypeOptions`	Choose what type of media to pick. Default:`'images'`
orderedSelection(optional)	`boolean`	Only for: iOS 15+ Whether to display number badges when assets are selected. The badges are numbered in selection order. Assets are then returned in the exact same order they were selected. Assets should be returned in the selection order regardless of this option, but there is no guarantee that it is always true when this option is disabled. Default:`false`
preferredAssetRepresentationMode(optional)	`UIImagePickerPreferredAssetRepresentationMode`	Only for: iOS 14+ Choose preferred asset representation mode to use when loading assets. Default:`ImagePicker.UIImagePickerPreferredAssetRepresentationMode.Automatic`
presentationStyle(optional)	`UIImagePickerPresentationStyle`	Only for: iOS Choose presentation style to customize view during taking photo/video. Default:`ImagePicker.UIImagePickerPresentationStyle.Automatic`
quality(optional)	`number`	Only for: Android iOS Specify the quality of compression, from `0` to `1`. `0` means compress for small size, `1` means compress for maximum quality. Note: If the selected image has been compressed before, the size of the output file may be bigger than the size of the original image. Note: On iOS, if a `.bmp` or `.png` image is selected from the library, this option is ignored. Default:`1.0`
selectionLimit(optional)	`number`	Only for: Android iOS 14+ The maximum number of items that user can select. Applicable when `allowsMultipleSelection` is enabled. Setting the value to `0` sets the selection limit to the maximum that the system supports. Default:`0`
shape(optional)	`CropShape`	Only for: Android Specify the shape of the crop area if the user is allowed to edit the image (by passing `allowsEditing: true`). This option is only applicable on Android. Default:`rectangle`
shouldDownloadFromNetwork(optional)	`boolean`	Only for: iOS When enabled, allows the picker to access and download media from iCloud or other remote sources if the asset is not stored locally on the device. This option gates the direct resource read that the picker attempts first. That read is used for Live Photos, and for videos when `videoExportPreset` is set to `Passthrough`. In all other cases, the media will be downloaded from iCloud automatically. Note: For videos, this option does not prevent a download. When it is disabled and the direct read fails because the data is not stored locally, the picker falls back to a slower path that fetches the asset from iCloud on its own. Enable this option to take the faster path for such videos. Note: Live Photos also honor this option, and they have no fallback path. Enable it when picking Live Photos that may not be stored locally. Default:`false`
videoExportPreset(optional)	`VideoExportPreset`	Deprecated: See `videoExportPreset` in Apple documentation. iOS 11+ Specify preset which will be used to compress selected video. Default:`ImagePicker.VideoExportPreset.Passthrough`
videoMaxDuration(optional)	`number`	Maximum duration, in seconds, for video recording. Setting this to `0` disables the limit. Defaults to `0` (no limit). On iOS, when `allowsEditing` is set to `true`, maximum duration is limited to 10 minutes. This limit is applied automatically, if `0` or no value is specified. On Android, effect of this option depends on support of installed camera app. On Web this option has no effect - the limit is browser-dependent.
videoQuality(optional)	`UIImagePickerControllerQualityType`	Only for: iOS Specify the quality of recorded videos. Defaults to the highest quality available for the device. Default:`ImagePicker.UIImagePickerControllerQualityType.High`

`ImagePickerResult`

Android

iOS

Web

Literal type: union

Type representing successful and canceled pick result.

Acceptable values are: ImagePickerSuccessResult | ImagePickerCanceledResult

`ImagePickerSuccessResult`

Android

iOS

Web

Type representing successful pick result.

Property	Type	Description
assets	`ImagePickerAsset[]`	An array of picked assets.
canceled	`false`	Boolean flag set to `false` showing that the request was successful.

`MediaLibraryPermissionResponse`

Android

iOS

Web

Extends PermissionResponse type exported by expo-modules-core, containing additional iOS-specific field.

Type: PermissionResponse extended by:

Property	Type	Description
accessPrivileges(optional)	`'all' \| 'limited' \| 'none'`	Indicates if your app has access to the whole or only part of the photo library. Possible values are: `'all'` if the user granted your app access to the whole photo library `'limited'` if the user granted your app access only to selected photos (only available on Android API 34+ and iOS 14.0+) `'none'` if user denied or hasn't yet granted the permission

`MediaType`

Android

iOS

Web

Literal type: string

Media types that can be picked by the image picker.

'images' - for images.
'videos' - for videos.
'livePhotos' - for live photos (iOS only).

When the livePhotos type is added to the media types array and a live photo is selected, the resulting ImagePickerAsset will contain an unaltered image and the pairedVideoAsset field will contain a video asset paired with the image. This option will be ignored when the allowsEditing option is enabled. Due to platform limitations live photos are returned at original quality, regardless of the quality option.

When on Android or Web livePhotos type passed as a media type will be ignored.

Acceptable values are: 'images' | 'videos' | 'livePhotos'

`PermissionExpiration`

Android

iOS

Web

Literal type: union

Permission expiration time. Currently, all permissions are granted permanently.

Acceptable values are: 'never' | number

`PermissionHookOptions`

Android

iOS

Web

Literal type: union

Acceptable values are: PermissionHookBehavior | Options

`PermissionResponse`

Android

iOS

Web

An object obtained by permissions get and request functions.

Property	Type	Description
canAskAgain	`boolean`	Indicates if user can be asked again for specific permission. If not, one should be directed to the Settings app in order to enable/disable the permission.
expires	`PermissionExpiration`	Determines time when the permission expires.
granted	`boolean`	A convenience boolean that indicates if the permission is granted.
status	`PermissionStatus`	Determines the status of the permission.

Enums

`CameraType`

Android

iOS

Web

`back`

CameraType.back ＝ "back"

Back/rear camera.

`front`

CameraType.front ＝ "front"

Front camera

Deprecated: To set media types available in the image picker use an array of MediaType instead.

`MediaTypeOptions`

Android

iOS

Web

`All`

MediaTypeOptions.All ＝ "All"

Images and videos.

`Images`

MediaTypeOptions.Images ＝ "Images"

Only images.

`Videos`

MediaTypeOptions.Videos ＝ "Videos"

Only videos.

`PermissionStatus`

Android

iOS

Web

`DENIED`

PermissionStatus.DENIED ＝ "denied"

User has denied the permission.

`GRANTED`

PermissionStatus.GRANTED ＝ "granted"

User has granted the permission.

`UNDETERMINED`

PermissionStatus.UNDETERMINED ＝ "undetermined"

User hasn't granted or denied the permission yet.

`UIImagePickerControllerQualityType`

Android

iOS

Web

`High`

UIImagePickerControllerQualityType.High ＝ 0

Highest available resolution.

`Medium`

UIImagePickerControllerQualityType.Medium ＝ 1

Depends on the device.

`Low`

UIImagePickerControllerQualityType.Low ＝ 2

Depends on the device.

`VGA640x480`

UIImagePickerControllerQualityType.VGA640x480 ＝ 3

640 × 480

`IFrame1280x720`

UIImagePickerControllerQualityType.IFrame1280x720 ＝ 4

1280 × 720

`IFrame960x540`

UIImagePickerControllerQualityType.IFrame960x540 ＝ 5

960 × 540

`UIImagePickerPreferredAssetRepresentationMode`

iOS

Picker preferred asset representation mode. Its values are directly mapped to the PHPickerConfigurationAssetRepresentationMode.

`Automatic`

UIImagePickerPreferredAssetRepresentationMode.Automatic ＝ "automatic"

A mode that indicates that the system chooses the appropriate asset representation.

`Compatible`

UIImagePickerPreferredAssetRepresentationMode.Compatible ＝ "compatible"

A mode that uses the most compatible asset representation.

`Current`

UIImagePickerPreferredAssetRepresentationMode.Current ＝ "current"

A mode that uses the current representation to avoid transcoding, if possible.

`UIImagePickerPresentationStyle`

iOS

Picker presentation style. Its values are directly mapped to the UIModalPresentationStyle.

`AUTOMATIC`

iOS

UIImagePickerPresentationStyle.AUTOMATIC ＝ "automatic"

The default presentation style chosen by the system. On older iOS versions, falls back to WebBrowserPresentationStyle.FullScreen.

`CURRENT_CONTEXT`

UIImagePickerPresentationStyle.CURRENT_CONTEXT ＝ "currentContext"

A presentation style where the picker is displayed over the app's content.

`FORM_SHEET`

UIImagePickerPresentationStyle.FORM_SHEET ＝ "formSheet"

A presentation style that displays the picker centered in the screen.

`FULL_SCREEN`

UIImagePickerPresentationStyle.FULL_SCREEN ＝ "fullScreen"

A presentation style in which the presented picker covers the screen.

`OVER_CURRENT_CONTEXT`

UIImagePickerPresentationStyle.OVER_CURRENT_CONTEXT ＝ "overCurrentContext"

A presentation style where the picker is displayed over the app's content.

`OVER_FULL_SCREEN`

UIImagePickerPresentationStyle.OVER_FULL_SCREEN ＝ "overFullScreen"

A presentation style in which the picker view covers the screen.

`PAGE_SHEET`

UIImagePickerPresentationStyle.PAGE_SHEET ＝ "pageSheet"

A presentation style that partially covers the underlying content.

`POPOVER`

UIImagePickerPresentationStyle.POPOVER ＝ "popover"

A presentation style where the picker is displayed in a popover view.

`VideoExportPreset`

Android

iOS

Web

`Passthrough`

VideoExportPreset.Passthrough ＝ 0

Resolution: Unchanged • Video compression: None • Audio compression: None

`LowQuality`

VideoExportPreset.LowQuality ＝ 1

Resolution: Depends on the device • Video compression: H.264 • Audio compression: AAC

`MediumQuality`

VideoExportPreset.MediumQuality ＝ 2

Resolution: Depends on the device • Video compression: H.264 • Audio compression: AAC

`HighestQuality`

VideoExportPreset.HighestQuality ＝ 3

Resolution: Depends on the device • Video compression: H.264 • Audio compression: AAC

`H264_640x480`

VideoExportPreset.H264_640x480 ＝ 4

Resolution: 640 × 480 • Video compression: H.264 • Audio compression: AAC

`H264_960x540`

VideoExportPreset.H264_960x540 ＝ 5

Resolution: 960 × 540 • Video compression: H.264 • Audio compression: AAC

`H264_1280x720`

VideoExportPreset.H264_1280x720 ＝ 6

Resolution: 1280 × 720 • Video compression: H.264 • Audio compression: AAC

`H264_1920x1080`

VideoExportPreset.H264_1920x1080 ＝ 7

Resolution: 1920 × 1080 • Video compression: H.264 • Audio compression: AAC

`H264_3840x2160`

VideoExportPreset.H264_3840x2160 ＝ 8

Resolution: 3840 × 2160 • Video compression: H.264 • Audio compression: AAC

`HEVC_1920x1080`

VideoExportPreset.HEVC_1920x1080 ＝ 9

Resolution: 1920 × 1080 • Video compression: HEVC • Audio compression: AAC

`HEVC_3840x2160`

VideoExportPreset.HEVC_3840x2160 ＝ 10

Resolution: 3840 × 2160 • Video compression: HEVC • Audio compression: AAC

权限

Android

以下权限会通过库的 AndroidManifest.xml 自动添加。

Android permission	Description
`CAMERA`	Required to be able to access the camera device.
`READ_EXTERNAL_STORAGE`	Allows an application to read from external storage.
`WRITE_EXTERNAL_STORAGE`	Allows an application to write to external storage.

iOS

此库中的 API 使用以下使用说明键。

Info.plist key	Description
`NSMicrophoneUsageDescription`	A message that tells the user why the app is requesting access to the device’s microphone.
`NSPhotoLibraryUsageDescription`	A message that tells the user why the app is requesting access to the user’s photo library.
`NSCameraUsageDescription`	A message that tells the user why the app is requesting access to the device’s camera.

Expo ImagePicker

已知问题 iOS

安装

在应用配置中配置

Example app.json with config plugin

Configurable properties

使用

调用视频权限 iOS

使用 AWS S3

使用 Firebase

API

Hooks

useCameraPermissions(options)

useMediaLibraryPermissions(options)

Methods

ImagePicker.getCameraPermissionsAsync()

ImagePicker.getMediaLibraryPermissionsAsync(writeOnly)

ImagePicker.getPendingResultAsync()

ImagePicker.launchCameraAsync(options)

ImagePicker.launchImageLibraryAsync(options)

ImagePicker.requestCameraPermissionsAsync()

ImagePicker.requestMediaLibraryPermissionsAsync(writeOnly)

Types

CameraPermissionResponse

CropShape

DefaultTab

ImagePickerAsset

ImagePickerCanceledResult

ImagePickerErrorResult

ImagePickerOptions

ImagePickerResult

ImagePickerSuccessResult

MediaLibraryPermissionResponse

MediaType

PermissionExpiration

PermissionHookOptions

PermissionResponse

Enums

CameraType

back

front

MediaTypeOptions

All

Images

Videos

PermissionStatus

DENIED

GRANTED

UNDETERMINED

UIImagePickerControllerQualityType

High

Medium

Low

VGA640x480

IFrame1280x720

IFrame960x540

UIImagePickerPreferredAssetRepresentationMode

Automatic

Compatible

Current

UIImagePickerPresentationStyle

AUTOMATIC

CURRENT_CONTEXT

FORM_SHEET

FULL_SCREEN

OVER_CURRENT_CONTEXT

OVER_FULL_SCREEN

PAGE_SHEET

POPOVER

VideoExportPreset

Passthrough

LowQuality

MediumQuality

HighestQuality

H264_640x480

H264_960x540

H264_1280x720

H264_1920x1080

H264_3840x2160

HEVC_1920x1080

已知问题
iOS

调用视频权限
iOS

`useCameraPermissions(options)`

`useMediaLibraryPermissions(options)`

`ImagePicker.getCameraPermissionsAsync()`

`ImagePicker.getMediaLibraryPermissionsAsync(writeOnly)`

`ImagePicker.getPendingResultAsync()`

`ImagePicker.launchCameraAsync(options)`

`ImagePicker.launchImageLibraryAsync(options)`

`ImagePicker.requestCameraPermissionsAsync()`

`ImagePicker.requestMediaLibraryPermissionsAsync(writeOnly)`

`CameraPermissionResponse`

`CropShape`

`DefaultTab`

`ImagePickerAsset`

`ImagePickerCanceledResult`

`ImagePickerErrorResult`

`ImagePickerOptions`

`ImagePickerResult`

`ImagePickerSuccessResult`

`MediaLibraryPermissionResponse`

`MediaType`

`PermissionExpiration`

`PermissionHookOptions`

`PermissionResponse`

`CameraType`

`back`

`front`

`MediaTypeOptions`

`All`

`Images`

`Videos`

`PermissionStatus`

`DENIED`

`GRANTED`

`UNDETERMINED`

`UIImagePickerControllerQualityType`

`High`

`Medium`

`Low`

`VGA640x480`

`IFrame1280x720`

`IFrame960x540`

`UIImagePickerPreferredAssetRepresentationMode`

`Automatic`

`Compatible`

`Current`

`UIImagePickerPresentationStyle`

`AUTOMATIC`

`CURRENT_CONTEXT`

`FORM_SHEET`

`FULL_SCREEN`

`OVER_CURRENT_CONTEXT`

`OVER_FULL_SCREEN`

`PAGE_SHEET`

`POPOVER`

`VideoExportPreset`

`Passthrough`

`LowQuality`

`MediumQuality`

`HighestQuality`

`H264_640x480`

`H264_960x540`

`H264_1280x720`

`H264_1920x1080`

`H264_3840x2160`

`HEVC_1920x1080`

`HEVC_3840x2160`