This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.
Expo ImagePicker
一个提供访问系统 UI 的库,用于从手机相册中选择图片和视频,或使用相机拍照。
expo-image-picker 提供了访问系统 UI 的能力,可用于从手机图库中选择图像和视频,或使用相机拍照。
已知问题 iOS
在 iOS 上,从相机胶卷中选取图像(通常为更高分辨率的图像)时,在某些情况下,裁剪后图像的结果会为裁剪矩形提供错误的值。遗憾的是,此问题源于底层的 UIImagePickerController,原因是 iOS 内置闭源工具中的一个错误。
安装
If you are installing this in an existing React Native app, make sure to install expo in your project.
在 app config 中配置
如果你在项目中使用配置插件(Continuous Native Generation (CNG)),你可以使用 expo-image-picker 内置的 config plugin 进行配置。该插件允许你配置各种无法在运行时设置的属性,这些属性需要重新构建新的应用二进制文件后才会生效。如果你的应用没有使用 CNG,那么你需要手动配置该库。
默认情况下,expo-image-picker 会在 Android 上添加 RECORD_AUDIO 权限。你可以通过将下面配置中的 microphonePermission 设为 false 来移除它。
Example app.json with config plugin
Configurable properties
Are you using this library in an existing React Native app?
如果你没有使用 Continuous Native Generation(CNG),或者你是在手动使用原生 ios 项目,那么你需要将 NSPhotoLibraryUsageDescription、NSCameraUsageDescription 和 NSMicrophoneUsageDescription 键添加到你的 ios/[app]/Info.plist 中:
用法
运行此示例并选择图像后,你将在应用中看到所选图像,同时控制台中会显示类似以下内容的日志:
{ "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 存储的示例,请参阅 with-aws-storage-upload。
请参阅 Amplify 文档 指南,以正确设置你的项目。
使用 Firebase
有关如何使用 Firebase 存储的示例,请参阅 with-firebase-storage-upload。
请参阅使用 Firebase指南,以正确设置你的项目。
API
import * as ImagePicker from 'expo-image-picker';
Hooks
Check or request permissions to access the camera.
This uses both requestCameraPermissionsAsync and getCameraPermissionsAsync to interact with the permissions.
[null | PermissionResponse, RequestPermissionMethod<PermissionResponse>, GetPermissionMethod<PermissionResponse>]Example
const [status, requestPermission] = ImagePicker.useCameraPermissions();
Check or request permissions to access the media library.
This uses both requestMediaLibraryPermissionsAsync and getMediaLibraryPermissionsAsync to interact with the permissions.
[null | MediaLibraryPermissionResponse, RequestPermissionMethod<MediaLibraryPermissionResponse>, GetPermissionMethod<MediaLibraryPermissionResponse>]Example
const [status, requestPermission] = ImagePicker.useMediaLibraryPermissions();
Methods
Checks user's permissions for accessing camera.
Promise<CameraPermissionResponse>A promise that fulfills with an object of type CameraPermissionResponse.
Checks user's permissions for accessing photos.
Promise<MediaLibraryPermissionResponse>A promise that fulfills with an object of type MediaLibraryPermissionResponse.
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.
Promise<ImagePickerResult | ImagePickerErrorResult | null>- On Android: a promise that resolves to an object of exactly same type as in
ImagePicker.launchImageLibraryAsyncorImagePicker.launchCameraAsyncif theImagePickerfinished successfully. Otherwise, an object of typeImagePickerErrorResult. - On other platforms:
null
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
MainActivitydestruction on Android. See ImagePicker.getPendingResultAsync. Notes for Web: The system UI can only be shown after user activation (e.g. aButtonpress). Therefore, callinglaunchCameraAsyncincomponentDidMount, for example, will not work as intended. Thecancelledevent will not be returned in the browser due to platform restrictions and inconsistencies across browsers.
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.
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
Buttonpress). Therefore, callinglaunchImageLibraryAsyncincomponentDidMount, for example, will not work as intended. Thecancelledevent will not be returned in the browser due to platform restrictions and inconsistencies across browsers.
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.
Asks the user to grant permissions for accessing camera. This does nothing on web because the browser camera is not used.
Promise<CameraPermissionResponse>A promise that fulfills with an object of type CameraPermissionResponse.
Asks the user to grant permissions for accessing user's photo. This method does nothing on web.
Promise<MediaLibraryPermissionResponse>A promise that fulfills with an object of type MediaLibraryPermissionResponse.
Types
Type: PermissionResponse
Alias for PermissionResponse type exported by expo-modules-core.
Literal type: string
The shape of the crop area.
Acceptable values are: 'rectangle' | 'oval'
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'
Represents an asset (image or video) returned by the image picker or camera.
Literal type: union
Type representing successful and canceled pick result.
Acceptable values are: ImagePickerSuccessResult | ImagePickerCanceledResult
Extends PermissionResponse type exported by expo-modules-core, containing additional iOS-specific field.
Type: PermissionResponse extended by:
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
livePhotostype is added to the media types array and a live photo is selected, the resultingImagePickerAssetwill contain an unaltered image and thepairedVideoAssetfield will contain a video asset paired with the image. This option will be ignored when theallowsEditingoption is enabled. Due to platform limitations live photos are returned at original quality, regardless of thequalityoption.
When on Android or Web
livePhotostype passed as a media type will be ignored.
Acceptable values are: 'images' | 'videos' | 'livePhotos'
Literal type: union
Permission expiration time. Currently, all permissions are granted permanently.
Acceptable values are: 'never' | number
Literal type: union
Acceptable values are: PermissionHookBehavior | Options
Enums
Deprecated: To set media types available in the image picker use an array of
MediaTypeinstead.
Picker preferred asset representation mode. Its values are directly mapped to the PHPickerConfigurationAssetRepresentationMode.
UIImagePickerPreferredAssetRepresentationMode.Automatic = "automatic"A mode that indicates that the system chooses the appropriate asset representation.
UIImagePickerPreferredAssetRepresentationMode.Compatible = "compatible"A mode that uses the most compatible asset representation.
Picker presentation style. Its values are directly mapped to the UIModalPresentationStyle.
UIImagePickerPresentationStyle.AUTOMATIC = "automatic"The default presentation style chosen by the system.
On older iOS versions, falls back to WebBrowserPresentationStyle.FullScreen.
UIImagePickerPresentationStyle.CURRENT_CONTEXT = "currentContext"A presentation style where the picker is displayed over the app's content.
UIImagePickerPresentationStyle.FORM_SHEET = "formSheet"A presentation style that displays the picker centered in the screen.
UIImagePickerPresentationStyle.FULL_SCREEN = "fullScreen"A presentation style in which the presented picker covers the screen.
UIImagePickerPresentationStyle.OVER_CURRENT_CONTEXT = "overCurrentContext"A presentation style where the picker is displayed over the app's content.
UIImagePickerPresentationStyle.OVER_FULL_SCREEN = "overFullScreen"A presentation style in which the picker view covers the screen.
UIImagePickerPresentationStyle.PAGE_SHEET = "pageSheet"A presentation style that partially covers the underlying content.
VideoExportPreset.Passthrough = 0Resolution: Unchanged • Video compression: None • Audio compression: None
VideoExportPreset.LowQuality = 1Resolution: Depends on the device • Video compression: H.264 • Audio compression: AAC
VideoExportPreset.MediumQuality = 2Resolution: Depends on the device • Video compression: H.264 • Audio compression: AAC
VideoExportPreset.HighestQuality = 3Resolution: Depends on the device • Video compression: H.264 • Audio compression: AAC
VideoExportPreset.H264_640x480 = 4Resolution: 640 × 480 • Video compression: H.264 • Audio compression: AAC
VideoExportPreset.H264_960x540 = 5Resolution: 960 × 540 • Video compression: H.264 • Audio compression: AAC
VideoExportPreset.H264_1280x720 = 6Resolution: 1280 × 720 • Video compression: H.264 • Audio compression: AAC
VideoExportPreset.H264_1920x1080 = 7Resolution: 1920 × 1080 • Video compression: H.264 • Audio compression: AAC
VideoExportPreset.H264_3840x2160 = 8Resolution: 3840 × 2160 • Video compression: H.264 • Audio compression: AAC
VideoExportPreset.HEVC_1920x1080 = 9Resolution: 1920 × 1080 • Video compression: HEVC • Audio compression: AAC
权限
Android
以下权限会通过该库的 AndroidManifest.xml 自动添加。
iOS
以下使用说明键会被该库中的 API 使用。