nativescript 图像选择器不工作

Posted 2023-02-19

【中文标题】nativescript 图像选择器不工作

【英文标题】：nativescript image-picker not working

【发布时间】：2017-10-20 13:40:43

【问题描述】：

我正在使用用于 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 的日志，但没有其他任何内容。

谢谢！！

【参考方案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()

【讨论】：

感谢 Davecoffin！ :) 正是这个！

【参考方案2】：

我遇到了一个稍微不同的问题，它只发生在 ios 上。我正在将 Nativescript 项目从 4 升级到 6，是的，我知道 NS 8 现已推出，但最新的 NS 不支持某些正在使用的库。

我的应用程序有一个弹出的模式列表视图，允许用户在相机和画廊之间进行选择，一旦用户单击其中一个选项，列表模式就会关闭。那时相机或画廊模式应该已经出现，但它没有。发生的事情是第一个模型的关闭以某种方式阻止了第二个模型的打开。我的解决方法是在调用 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);
        );