在NativeScript中显示PopOver

时间:2016-04-25 22:05:51

标签: javascript ios ipad nativescript

我一直致力于让UIPrinterPicker在带有NativeScript的iPad上显示。我得到了其他人的大力帮助。

我现在遇到的问题是UIPrinterPicker PopOver无法在iPad上正确显示。正如您在图像中看到的那样,时间下方的白条是PopOver。我没有应用任何CSS,也没有找到任何关于在NativeScript中设置PopOver样式的文档。

注意:我可以让iPhone上显示UIPrinterPicker,因为它不需要在PopOver中打开。

enter image description here

以下是该页面的相关代码:

var frames = require("ui/frame");
var view;

function pageLoaded(args) {
    var page = args.object;
    view = page.ios;
}
exports.pageLoaded = pageLoaded;

function selectPrinter() {
    var runningOniPad = (UIDevice.currentDevice().userInterfaceIdiom == UIUserInterfaceIdiomPad);
    var printPicker = UIPrinterPickerController.printerPickerControllerWithInitiallySelectedPrinter(null);
    var completionHandler = function(printerPicker, userDidSelect, error) {
                                if (error != null) {
                                    console.log("error: " + error);
                                }
                                global.selectedPrinter = printerPicker.selectedPrinter;
                                console.log("selectedPrinter: " + global.selectedPrinter);
                            };
    if ( ! runningOniPad) {
        printPicker.presentAnimatedCompletionHandler(false, completionHandler);
    } else {
        printPicker.presentFromRectInViewAnimatedCompletionHandler(view.view.frame, view.view, false, completionHandler);
    }

}
exports.selectPrinter = selectPrinter;

以下是UI XML:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
    <GridLayout columns="*" rows="*" horizontalAlignment="center" verticalAlignment="center" >
        <StackLayout id="myStackLayout">
            <Button text="Select Printer" tap="selectPrinter" />
        </StackLayout>
    </GridLayout>
</Page>

有没有办法正确显示PopOver?

1 个答案:

答案 0 :(得分:1)

我已经测试了你的情况,我已经做了什么来展示iPad下的PopOver是用initWithFrame创建一个自定义视图,如下所示:

else {

    var makeView = UIView.alloc().initWithFrame({origin: {x:0, y:0}, size: {width: 400, height: 600 } });

    printPicker.presentFromRectInViewAnimatedCompletionHandler(makeView.frame, view.view, false, completionHandler);
}

您可以使用原生方式进一步自定义新视图。 如果您想知道如何相对于自定义视图的位置,您可以使用类似这样的内容

var makeView = UIView.alloc().initWithFrame({
    origin: { x: view.view.frame.origin.x, 
              y: view.view.frame.origin.y }, 
    size: { width: view.view.bounds.size.width/2, 
            height: view.view.bounds.size.height/2 } 
});

我强烈建议您为变量 view 使用不同的单词,以避免在阅读 view.view

等内容时出现混淆