NativeScript 中的自定义对话框

Posted 2023-04-13

【中文标题】NativeScript 中的自定义对话框

【英文标题】：Custom Dialog in NativeScript

【发布时间】：2015-10-16 02:03:47

【问题描述】：

我正在学习NativeScript。作为这项工作的一部分，我正在尝试创建一个向用户显示对话框的页面。当用户单击按钮时，我需要向他们显示一个对话框，允许他们输入两个值（名字和姓氏）。

NativeScript 中的dialogs module 提供了几个内置选项。但是，据我所知，这些选项都不允许您创建显示两个字段的对话框。如何在 NativeScript 中创建一个对话框，允许我提示用户输入名字和姓氏？目前，我的页面如下所示：

page.xml

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
  <GridLayout rows="auto, *">
      <Border borderWidth="1" borderColor="#000"   cornerRadius="14" tap="addPersonButton_Tap">
        <Label text="add person" />
      </Border>      
  </GridLayout>
</Page>

page.js

var viewModel = new MyPageViewModel();
function pageLoaded(args) 
    var page = args.object;
    page.bindingContext = viewModel;        

exports.pageLoaded = pageLoaded;

function addPersonButton_Tap(args) 
    console.log('new person');
    /*
     * Dialog open code goes here. Yet, the following definitaly is not correct.
    dialogs.prompt(
        title: "Add New Person",
        message: "First Name",
        okButtonText: "Save",
        cancelButtonText: "Cancel",
        inputType: dialogs.inputType.text
    ).
    then(function (r) 
        if (r.result) 
          console.log('User clicked "Save"!');
        
    );   
    */

exports.addPersonButton_Tap = addPersonButton_Tap;

【参考方案1】：

我们已经支持模态页面。在这里你可以看到一个演示：https://github.com/NativeScript/NativeScript/blob/7c13db6bc241c48d5897d556f2973944b8b750d6/apps/app/ui-tests-app/modal-view/modal-view.ts。

此外，您还可以在文档中找到您需要的信息：

http://docs.nativescript.org/ui-dialogs#prompt http://docs.nativescript.org/api-reference/classes/_ui_page_.page.html#showmodal

我只想再提一件事。我看到您使用的是 Border 标签。现在您可以改用 CSS 样式。

【讨论】：

嘿@Neli Chakarova github 链接已失效。你能更新一下吗？

嘿@HardikVaghani - 我相信this 是替换答案中的链接。请让我知道这是否是您要找的。​​span>

【参考方案2】：

在搜索显示自定义对话框时到达此处的任何人。请参考this

这里正确记录了如何在 nativescript 中显示自定义对话框。具体在页面底部寻找 showModal 功能。在这个函数中，用户可以传入moduleName（从应用程序根开始）、上下文、closeCallBack函数和布尔值以全屏显示模态。

【参考方案3】：

我以前从未见过 NativeScript，但只是浏览了文档，我认为您没有以正确的方式处理这个问题。在文档中它说：“NativeScript 允许您以类似于 Web 浏览器的方式在您的应用程序中创建对话框。您可以创建需要操作的警报、确认、提示、登录和对话框。”在网络浏览器中，没有办法做你所要求的（拉出一个带有两个小文本字段的对话框提示）。在 Web 浏览器中，您可以通过使用 html 创建表单来完成此操作。它看起来像这里的示例 2：http://developer.telerik.com/featured/getting-started-nativescript/ 更符合您的需求。