当前位置: 代码迷 >> JavaScript >> NativeScript中的自定义对话框
  详细解决方案

NativeScript中的自定义对话框

热度:22   发布时间:2023-06-03 17:51:26.0

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

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

page.xml

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
  <GridLayout rows="auto, *">
      <Border borderWidth="1" borderColor="#000" width="28" height="28" 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;

我们已经支持模态页面了。 在这里你可以看到它的演示: : 。

此外,您还可以在文档中找到所需的信息:

我只想提一件事。 我看到你正在使用Border标签。 现在您可以使用CSS样式代替。

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

这里正确记录了如何在nativescript中显示自定义对话框。 具体查看页面底部的showModal函数。 在这个函数中,用户可以传入moduleName(从应用程序根目录开始),context,closeCallBack函数和boolean来全屏显示模态。

我之前从未见过NativeScript,只是翻阅文档,我认为你并没有以正确的方式接近它。 在它所说的文档中,“NativeScript允许您以类似于Web浏览器的方式在应用程序中创建对话框。您可以创建需要操作的警报,确认,提示,登录和对话框。” 并且在Web浏览器中没有办法执行您要求的操作(使用两个小文本字段提取对话框提示)。 在Web浏览器中,您可以通过使用html创建表单来实现此目的。 它看起来像示例2: : 更像是你所追求的。