NativeScript Image Picker

支持单选和复选的图片选择插件。
插件支持 iOS8+ 并使用 QBImagePicker cocoa pod。
对于 Android，它使用 Intent 打开系统图片或文件选择器。对于 Android 6 (API 23) 及以上版本，需要显式要求读取文件存储权限。请查看示例以获取实现详情。

• 安装
• 配置
• 从 5.x.x 迁移到 6.x.x
• 从 4.x.x 迁移到 5.x.x
• 从 3.x.x 迁移到 4.x.x
• 使用方法
  • 导入插件
  • 创建图片选择器
  • 请求权限，显示图片列表并处理选择
• API
  • 方法
• 贡献
• 获取帮助

安装

在命令提示符/终端中导航到您的应用程序根目录，然后运行

tns plugin add nativescript-imagepicker
tns run

配置

无需其他配置！

从 5.x.x 迁移到 6.x.x

在版本 6.x.x 中，已删除对 nativescript-ui-listview 插件的依赖，并且对于 iOS 使用 QBImagePicker cocoa pod。现在插件支持一些新功能，修复了一些错误，并在 iOS 中有更原生的外观。如果您在应用程序中添加了对 nativescript-pro-ui、nativescript-ui-listview 等的依赖，特别是为此插件而添加，则应将其删除。此外，选项 fileUri、doneText、cancelText、albumsText、newestFirst 以及方法 cancel() 和 done() 已不再适用。现在图片选择器返回基本的 {N} ImageAsset 类（而不是之前的自定义资产）。如果您在 6.x.x 版本之前使用返回资产的 fileUri 属性来获取文件路径，则应参考以下问题评论以获取替代方法 - https://github.com/NativeScript/nativescript-imagepicker/issues/181#issuecomment-384585293。

从 4.x.x 迁移到 5.x.x

在版本 5.x.x 中，对插件进行了主要更新，需要更新项目中的相关依赖项。插件内部使用 nativescript-ui-listview 插件（NativeScript Pro UI 组件的一部分）。最近，单一代码库的 NativeScript Pro UI 插件被拆分为多个插件，每个插件代表一个单一组件。现在，而不是使用单一代码库，nativescript-imagepicker 仅使用它需要的组件。要使用插件的 5.x.x 版本，您需要将项目中的任何 nativescript-pro-ui 依赖项更新为所描述的单一代码库替代方案，如迁移指南中所述。

从 3.x.x 迁移到 4.x.x

随着插件进行的 4.x.x 主要更新，项目中需要更新一个相关依赖。该插件内部使用 nativescript-pro-ui 插件（之前称为 nativescript-telerik-ui），该插件已更新并免费提供。这意味着如果您的项目使用已弃用的 nativescript-telerik-ui/pro 插件，添加最新版本的 nativescript-imagepicker 插件将导致项目在处理 iOS 时抛出构建错误。这是因为 nativescript-imagepicker 依赖于新的 nativescript-pro-ui 插件，而您的项目也依赖于旧的 nativescript-telerik-ui 插件时，存在原生框架冲突。

为了解决这个问题，您只需要更新到最新的 nativescript-pro-ui，有关如何从 nativescript-telerik-ui/pro 迁移到 nativescript-pro-ui 的更多详细信息，请参阅这里。

使用方法

探索插件使用最佳方式是检查插件存储库中的示例应用。在 demo 文件夹中，您可以找到用于 TypeScript 非Angular 应用的插件使用示例。请参阅 demo/app/main-page.ts。在 demo-angular 中是 Angular 应用的使用示例。请参阅 demo-angular/app/app.component.ts。

除了插件使用外，这两个应用都进行了 webpack 配置。

简而言之，以下是步骤

导入插件

TypeScript

import * as imagepicker from "nativescript-imagepicker";

Javascript

var imagepicker = require("nativescript-imagepicker");

创建图片选择器

在 single 或 multiple 模式下创建 imagepicker，以指定 imagepicker 是否用于单张或多张图片的选择

TypeScript

let context = imagepicker.create({
    mode: "single" // use "multiple" for multiple selection
});

Javascript

var context = imagepicker.create({ mode: "single" }); // use "multiple" for multiple selection

请求权限，显示图片列表并处理选择

context
    .authorize()
    .then(function() {
        return context.present();
    })
    .then(function(selection) {
        selection.forEach(function(selected) {
            // process the selected image
        });
        list.items = selection;
    }).catch(function (e) {
        // process error
    });

注意：为了请求 Android 6+ (API 23+) 的权限，我们使用 nativescript-permissions。

注意：在 iOS 上使用该插件需要照片库权限。如果您的应用没有提供关于为什么需要此权限的描述，可能会被苹果应用商店拒绝。默认消息 "需要访问照片库" 可能不足以让应用商店审稿人满意。您可以通过编辑应用中的 app/App_Resources/iOS/Info.plist 文件并添加以下键来自定义它：

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

API

方法

• create(options) - 创建 imagepicker 实例。可能的选项有

hostView 参数可以设置为托管 image picker 的视图。仅在 iOS 上适用，旨在在从模态页面打开选择器时使用。

• authorize() - 请求所需的权限。
• present() - 显示相册以使用户能够选择图像。返回所选图像的数组。

贡献

我们喜欢 PRs！请查看贡献指南。如果您想贡献，但不确定从哪里开始 - 寻找标记为 help wanted 的问题。

获取帮助

请严格使用 GitHub 问题 来报告错误或请求新功能。对于一般性问题和支持，请查阅 Stack Overflow 或在我们的NativeScript 社区 Slack 频道中咨询我们的专家。