在 GitHub 上查看

@nativescript/imagepicker ​

内容 ​

• 简介
• 安装
  • Android 需要的权限
  • iOS 需要的权限
• 选择图片
  • 演示
• API
  • ImagePicker 类
  • create()
  • 选项
  • ImagePickerMediaType

简介 ​

支持单选和多选的图片选择器插件。

• 该插件支持 **iOS8+** 并使用 QBImagePicker cocoapod。
• 对于 **Android**，它使用 Intents 打开库存图片或文件选择器。对于 Android 6 (API 23) 及更高版本，应明确要求读取文件存储的权限。

安装 ​

通过在应用程序根目录中运行以下命令来安装插件。

npm install @nativescript/imagepicker

注意：版本 3.1 包含重大更改

• 当用户选择 Limit AccessLim.. 时，iOS 上的新行为将在 iOS 有限权限 中详细说明。

注意：版本 3.0 包含重大更改

• authorize() 现在为 android 和 ios 返回一个 Promise<AuthorizationResult>。
• 在 present() 返回的结果中，每个 result[i].thumbnail 现在都是一个 ImageSource。
• result[i].duration 现在被正确地类型化为 number。

注意：版本 2.0 包含重大更改。为了提供有关您的选择更多信息，ImageSource 资产嵌套在响应中，因此您需要更新您的代码以使用 result.asset 而不是 result 作为您图片的 src。

Android 需要的权限 ​

将以下权限添加到 App_Resources/Android/src/main/AndroidManifest.xml 文件

• targetSdkVersion < 33

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

<application android:requestLegacyExternalStorage="true" ... >
    ...
  </application>

• targetSdkVersion >=33(Android 13+)

<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />

<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />

查看完整的示例 这里。

iOS 需要的权限 ​

在 iOS 上使用该插件需要 NSPhotoLibraryUsageDescription 权限。修改 app/App_Resources/iOS/Info.plist 文件以添加它，如下所示

<key>NSPhotoLibraryUsageDescription</key>
<string>Description text goes here</string>

如果您没有说明为什么要需要此权限，Apple App Store 可能会拒绝您的应用程序。默认消息 Requires access to photo library. 对于 App Store 审核人员来说可能不够。

iOS 有限权限 ​

Apple 在 iOS 14 中引入了 PHAuthorizationStatusLimited 权限状态，在这种状态下，用户指定应用程序只能通过在授权对话框中选择 Limit Access.. 选项来访问指定的图片。

在这种情况下，authorise() 将返回一个 AuthorizationResult，其中 authorized 将为 true，而 details 将包含 'limited'。

每次应用程序重新启动并调用 authorize 方法时，如果当前权限为 limited，系统将提示用户更新图片选择。

要防止此提示，请将以下值添加到您的 App_Resources/iOS/Info.plist 中

<key>PHPhotoLibraryPreventAutomaticLimitedAccessAlert</key>
<true/>

选择图片 ​

要使用该插件选择图片（和/或视频），请按照以下步骤操作

1. 导入插件

import * as imagePickerPlugin from '@nativescript/imagepicker'

2. 使用选择模式实例化选择器

通过调用插件的 create 函数并传递一个指定媒体资产选择模式（single 或 multiple）的对象来实例化选择器。

let imagePickerObj: ImagePicker = imagePickerPlugin.create({
  mode: 'single',
})

3. 选择图片

• 请求权限 通过调用异步 authorize 方法请求访问图片库的权限。
• 显示媒体资产列表 如果授权请求 Promise 已解决（即用户已授予权限），请通过调用 present 方法显示要从中选择的媒体资产列表。
• 处理选择 present 方法将使用选定的媒体资产解析，您可以使用这些资产进行处理和使用。

imagePickerObj
  .authorize()
  .then((authResult) => {
    if (authResult.authorized) {
      return imagePickerObj.present().then(function (selection) {
        selection.forEach(function (selected) {
          this.imageSource = selected.asset
          this.type = selected.type
          this.filesize = selected.filesize
          //etc
        })
      })
    } else {
      // process authorization not granted.
    }
  })
  .catch(function (e) {
    // process error
  })

演示 ​

您可以在以下任一链接的 StackBlitz 上试用该插件

• NativeScript TypeScript
• NativeScript Angular
• NativeScript Vue
• NativeScript Svelte

API ​

ImagePicker 类 ​

提供媒体选择 API 的类。它提供以下方法

选项 ​

传递给 create 方法的对象，用于指定媒体选择的特性。

ImagePickerMediaType ​

要选择的媒体资产类型。

• Any = 0,
• Image = 1,
• Video = 2

许可证 ​

Apache 许可证 2.0 版