Expo DocumentPicker
一个库,提供对系统 UI 的访问,以便从用户设备上的可用提供程序中选择文档。
expo-document-picker 提供访问系统用户界面的功能,允许从用户设备上的可用提供商中选择文档。
安装
🌐 Installation
- npx expo install expo-document-pickerIf you are installing this in an existing React Native app, make sure to install expo in your project.
应用配置中的配置
🌐 Configuration in app config
如果你在项目中使用配置插件(连续原生生成 (CNG)),可以使用其内置的 配置插件 来配置 expo-document-picker。该插件允许你配置无法在运行时设置并且需要构建新的应用二进制文件才能生效的各种属性。如果你的应用不使用 CNG,则需要手动配置该库。
🌐 You can configure expo-document-picker using its built-in config plugin if you use config plugins in your project (Continuous Native Generation (CNG)). The plugin allows you to configure various properties that cannot be set at runtime and require building a new app binary to take effect. If your app does not use CNG, then you'll need to manually configure the library.
Example app.json with config plugin
如果你想启用 iCloud 存储功能,请按照 配置属性 中的说明,在 应用配置 文件中将 expo.ios.usesIcloudStorage 键设置为 true。
🌐 If you want to enable iCloud storage features, set the expo.ios.usesIcloudStorage key to true in the app config file as specified configuration properties.
在本地运行 EAS Build 将使用 iOS 功能签名 在构建之前启用所需的功能。
🌐 Running EAS Build locally will use iOS capabilities signing to enable the required capabilities before building.
{ "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 存储功能 的应用必须为其打包标识符 手动配置 支持 CloudKit 的 iCloud 服务。
🌐 Apps that don't use EAS Build and want iCloud storage features must manually configure the iCloud service with CloudKit support for their bundle identifier.
如果你通过 Apple 开发者控制台 启用了 iCloud 功能,请确保在你的 ios/[app]/[app].entitlements 文件中添加以下权限(其中 dev.expo.my-app 是你的应用标识符):
🌐 If you enable the iCloud capability through the Apple Developer Console, then be sure to add the following entitlements in your ios/[app]/[app].entitlements file (where dev.expo.my-app if your 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 开发者控制台还需要创建一个 iCloud 容器。在注册新容器时,你需要提供容器的描述和标识符。描述栏可以填写任何名称。在标识符栏中,添加 iCloud.<your_bundle_identifier>(与 com.apple.developer.icloud-container-identifiers 和 com.apple.developer.ubiquity-container-identifiers 权限使用的值相同)。
🌐 Apple Developer Console also requires an iCloud Container to be created. When registering the new container, you are asked to provide a description and identifier for the container. You may enter any name under the description. Under the identifier, add iCloud.<your_bundle_identifier> (same value used for com.apple.developer.icloud-container-identifiers and com.apple.developer.ubiquity-container-identifiers entitlements).
与 expo-file-system 一起使用
🌐 Using with expo-file-system
在将 expo-document-picker 与 expo-file-system 一起使用时,在 expo-document-picker 处理文件后,文件系统并不总能立即读取该文件。
🌐 When using expo-document-picker with expo-file-system, it's not always possible for the file system to read the file immediately after the expo-document-picker picks it.
为了允许 expo-file-system 在文件被选中后立即读取,你需要确保 copyToCacheDirectory 选项设置为 true。
🌐 To allow the expo-file-system to read the file immediately after it is picked, you'll need to ensure that the copyToCacheDirectory option is set to 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
|