Expo DocumentPicker
一个库,提供对系统 UI 的访问,用于从用户设备上可用的提供程序中选择文档。
For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.
expo-document-picker 提供了访问系统 UI 的能力,用于从用户设备上可用的提供方中选择文档。
安装
- npx expo install expo-document-pickerIf you are installing this in an existing React Native app, make sure to install expo in your project.
app config 中的配置
如果你的项目使用 config plugins(Continuous Native Generation (CNG)),你可以使用 expo-document-picker 内置的 config plugin 进行配置。该插件允许你配置在运行时无法设置、且需要重新构建新的应用二进制文件后才会生效的各种属性。如果你的应用不使用 CNG,那么你需要手动配置该库。
Example app.json with config plugin
如果你想启用 iCloud 存储功能,请按照 配置属性 的说明,在 app config 文件中将 expo.ios.usesIcloudStorage 键设置为 true。
在本地运行 EAS Build 时,会使用 iOS capabilities signing 在构建前启用所需的 capabilities。
{ "expo": { "plugins": [ [ "expo-document-picker", { "iCloudContainerEnvironment": "Production" } ] ] } }
Configurable properties
| Name | Default | Description |
|---|---|---|
iCloudContainerEnvironment | undefined | Only for: iOS 设置用于 AdHoc iOS 构建的 iOS |
kvStoreIdentifier | undefined | Only for: iOS 覆盖默认的 iOS |
Are you using this library in an existing React Native app?
不使用 EAS Build 且希望使用 iCloud 存储功能 的应用,必须为其 bundle identifier 手动配置 带有 CloudKit 支持的 iCloud service。
如果你通过 Apple Developer Console 启用了 iCloud capability,那么请务必在 ios/[app]/[app].entitlements 文件中添加以下 entitlements(其中 dev.expo.my-app 是你的 bundle identifier):
<key>com.apple.developer.icloud-container-identifiers</key> <array> <string>iCloud.dev.expo.my-app</string> </array> <key>com.apple.developer.icloud-services</key> <array> <string>CloudDocuments</string> </array> <key>com.apple.developer.ubiquity-container-identifiers</key> <array> <string>iCloud.dev.expo.my-app</string> </array> <key>com.apple.developer.ubiquity-kvstore-identifier</key> <string>$(TeamIdentifierPrefix)dev.expo.my-app</string>
Apple Developer Console 还要求创建一个 iCloud Container。在注册新的容器时,系统会要求你提供该容器的描述和标识符。描述可以填写任意名称。标识符填写 iCloud.<your_bundle_identifier>(该值与 com.apple.developer.icloud-container-identifiers 和 com.apple.developer.ubiquity-container-identifiers entitlements 中使用的值相同)。
与 expo-file-system 一起使用
当将 expo-document-picker 与 expo-file-system 一起使用时,文件系统不一定能够在 expo-document-picker 选中文件后立即读取该文件。
为了让 expo-file-system 在文件被选中后立即读取它,你需要确保将 copyToCacheDirectory 选项设置为 true。
API
import * as DocumentPicker from 'expo-document-picker';
Component
Type: React.Element<DocumentPickerOptions>
Display the system UI for choosing a document. By default, the chosen file is copied to the app's internal cache directory.
Notes for Web: The system UI can only be shown after user activation (e.g. a
Buttonpress). Therefore, callinggetDocumentAsyncincomponentDidMount, for example, will not work as intended. Thecancelevent will not be returned in the browser due to platform restrictions and inconsistencies across browsers.
Types
| Property | Type | Description |
|---|---|---|
| base64(optional) | string | Only for: Web Base64 string of the file. |
| file(optional) | File | Only for: Web
|
| lastModified | number | Timestamp of last document modification. Web API specs The lastModified provides the last modified date of the file as the number of milliseconds since the Unix epoch (January 1, 1970 at midnight). Files without a known last modified date return the current date. |
| mimeType(optional) | string | Document MIME type. |
| name | string | Document original name. |
| size(optional) | number | Document size in bytes. |
| uri | string | An URI to the local document file. |
Type representing canceled pick result.
| Property | Type | Description |
|---|---|---|
| assets | null | Always |
| canceled | true | Always |
| output(optional) | null | Only for: Web Always |
| Property | Type | Description |
|---|---|---|
| base64(optional) | boolean | Only for: Web If Default: true |
| copyToCacheDirectory(optional) | boolean | Only for: Android iOS If Default: true |
| multiple(optional) | boolean | Allows multiple files to be selected from the system UI. Default: false |
| type(optional) | string | string[] | The MIME type(s) of the documents that are available
to be picked. It also supports wildcards like Default: '*/*' |
Literal Type: union
Type representing successful and canceled document pick result.
Acceptable values are: DocumentPickerSuccessResult | DocumentPickerCanceledResult
Type representing successful pick result.
| Property | Type | Description |
|---|---|---|
| assets | DocumentPickerAsset[] | An array of picked assets. |
| canceled | false | If asset data have been returned this should always be |
| output(optional) | FileList | Only for: Web
|