NativeScript中的自定义对话框

Custom Dialog in NativeScript

本文关键字：对话框 自定义 NativeScript      更新时间：2023-09-26

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

NativeScript中的dialog模块提供了几个内置选项。然而，据我所知，这些选项都不允许您创建显示两个字段的对话框。如何在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;

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

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

  • http://docs.nativescript.org/ui-dialogs提示
  • http://docs.nativescript.org/api-reference/classes/_ui_page_.page.html showmodal

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

任何在这里搜索显示自定义对话框的人。请参考

这里有适当的文档说明如何在原生脚本中显示自定义对话框。特别是在页面底部查找showModal函数。在这个函数中，用户可以传入moduleName(从应用程序根开始)、context、closeCallBack函数和布尔值来全屏显示模态。

我以前从未见过NativeScript，但只是翻阅文档，我不认为你正在接近这个正确的方式。在文档中，它说，"NativeScript让你在应用程序中以类似于web浏览器的方式创建对话框。你可以创建提醒、确认、提示、登录和需要操作的对话框，而在web浏览器中，没有办法做你要求的事情(拉出一个带有两个小文本字段的对话框提示)。在web浏览器中，您可以通过使用html创建表单来完成此操作。它看起来像这里的示例2:http://developer.telerik.com/featured/getting-started-nativescript/更符合您所追求的内容。

相关文章：