nativescript 图像选择器不工作

Question

我正在使用 nativescript 的插件图像选择器，我复制了示例代码以查看其工作原理并使其适应我的代码。但是代码不起作用。当我点击按钮时，应该会打开我设备上的屏幕图库，但是当我点击按钮时什么也没有发生。

下面的代码是我如何实现的。

album_list.component.ts

import { Component } from '@angular/core';
import { RouterExtensions } from 'nativescript-angular/router';

//image picker
var imagepicker = require("nativescript-imagepicker");


@Component({
    selector:'album_list',
    moduleId: module.id,
    templateUrl: "album_list.component.html",

})

export class AlbumListComponent{

    constructor(private routerExt: RouterExtensions ){}


    ngOnInit() {

    }

    onSelectMultipleTap() {
        console.log('Im in');

        function selectImages() {
            var context = imagepicker.create({
                mode: "multiple"
            });

            context
                .authorize()
                .then(function() {
                    return context.present();
                })
                .then(function(selection) {
                    console.log("Selection done:");
                    selection.forEach(function(selected) {
                        console.log(" - " + selected.uri);
                    });
                }).catch(function (e) {
                    console.log(e);
                });
        }

    }


}

album_list.component.html

<StackLayout>
        <Button text="Pick Multiple Images" (tap)="onSelectMultipleTap()" > </Button>
</StackLayout>

正如我所说，当我点击 html 中的按钮时，会出现来自函数 onSelectMultipleTap 的日志，但没有其他内容。

谢谢！！

Answer 1

您没有调用 selectImages()，您只是声明它。替换为：

onSelectMultipleTap() {
    console.log('Im in');

    function selectImages() {
        var context = imagepicker.create({
            mode: "multiple"
        });

        context
            .authorize()
            .then(function() {
                return context.present();
            })
            .then(function(selection) {
                console.log("Selection done:");
                selection.forEach(function(selected) {
                    console.log(" - " + selected.uri);
                });
            }).catch(function (e) {
                console.log(e);
            });
    }
    selectImages()

}

Answer 2

我有一个稍微不同的问题，只发生在 iOS。我正在将 Nativescript 项目从 4 升级到 6，是的，我知道 NS 8 现在已经发布，但是最新的 NS 不支持正在使用的一些库。

我的应用程序有一个弹出的模式列表视图，允许用户 select 在相机和画廊之间，一旦用户单击其中一个选项，列表模式就会关闭。那时相机或画廊模态应该出现但没有出现。发生的事情是第一个模型的关闭以某种方式阻止了第二个模式的打开。我的解决方法是在调用 context.present() 之前在我的方法中添加条件异步超时。请参阅下面的代码：

public takePicture() {
    // const options = { width: 1280, height: 720, keepAspectRatio: false, saveToGallery: false};
    const self = this;
    camera.requestPermissions()
        .then(async function () {
            //This iOS pause is needed so the camera modal popup will not be stopped by the list option modal closing
            if (isIOS) { 
                await new Promise(resolve => setTimeout(() => resolve(), 1000));
            }
        })
        .then (function() {
            camera.takePicture()
                .then((imageAsset) => {
                    const imagePost = new TripMessagePostModel();
                    ImageSource.fromAsset(imageAsset).then((result) => {
                        const time = new Date();
                        imagePost.image = result.toBase64String("jpeg", 50);
                        imagePost.imageFileName = `${self.userId}-${time.getTime()}.jpeg`;
                            self.addPost(imagePost);
                    });
                }).catch((err) => {
                    console.log("Error -> " + err.message);
                });
            }
        )
    }

public selectImage() {
    const context = imagepicker.create({
        mode: "single",
    });

    const imagePost = new TripMessagePostModel();
    context
        .authorize()
        .then(async function() {
            //This iOS pause is needed so the camera modal popup will not be stopped by the list option modal closing
            if (isIOS) { 
                await new Promise(resolve => setTimeout(() => resolve(), 1000));
            }
            return context.present();
        })
        .then(function(selection) {
            selection.forEach(async (selected) => {
                ImageSource.fromAsset(selected).then((result) => {
                    //console.log(selected.android.toString());
                    const time = new Date();
                    imagePost.image = result.toBase64String("jpeg", 40);
                    imagePost.imageFileName = `${this.userId}-${time.getTime()}.jpeg`;
                    
                    this.addPost(imagePost);
                    
                });
            });
        }).catch((e) => {
            console.log(e);
        });
}

nativescript 图像选择器不工作

nativescript image-picker not working

image

nativescript

angular2-nativescript

nativescript-plugin