在 NativeScript 中显示 PopOver

Question

我一直在努力让 UIPrinterPicker 使用 NativeScript 在 iPad 上显示。我从其他人那里得到了很大的帮助。

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

注意： 我能够让 UIPrinterPicker 显示在 iPhone 上，因为它不需要在 PopOver 中打开。

下面是页面的相关代码：

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？

Answer 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

在 NativeScript 中显示 PopOver

Display PopOver in NativeScript

javascript

ipad

ios

nativescript