Hộp thoại tùy chỉnh trong NativeScript

Question

Tôi đang học NativeScript. Là một phần của nỗ lực đó, tôi đang cố tạo một trang hiển thị hộp thoại cho người dùng. Khi người dùng nhấp vào một nút, tôi cần hiển thị cho họ một hộp thoại cho phép họ nhập hai giá trị (họ và tên).

dialogs module trong NativeScript cung cấp một số tùy chọn được tích hợp sẵn. Tuy nhiên, từ những gì tôi có thể nói, không có tùy chọn nào trong số này cho phép bạn tạo hộp thoại hiển thị hai trường. Làm cách nào để tạo một hộp thoại trong NativeScript cho phép tôi nhắc người dùng nhập tên và họ? Hiện tại, trang web của tôi trông như thế này:

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; 

Answer 1

Chúng tôi đã hỗ trợ các trang phương thức. Ở đây bạn có thể xem bản trình diễn với nó: https://github.com/NativeScript/NativeScript/blob/7c13db6bc241c48d5897d556f2973944b8b750d6/apps/app/ui-tests-app/modal-view/modal-view.ts.

Hơn nữa, bạn cũng có thể tìm thấy thông tin mình cần trong tài liệu:

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

Tôi chỉ muốn đề cập đến một điều nữa. Tôi thấy rằng bạn đang sử dụng thẻ Border. Bây giờ bạn có thể sử dụng kiểu dáng CSS thay thế.

Answer 2

Tôi chưa từng thấy NativeScript trước nhưng chỉ flipping thông qua các tài liệu tôi đừng nghĩ rằng bạn đang tiếp cận đúng cách này. Trong tài liệu nó nói, "NativeScript cho phép bạn tạo các hộp thoại trong ứng dụng của bạn theo cách tương tự như trình duyệt web. Bạn có thể tạo cảnh báo, xác nhận, lời nhắc, thông tin đăng nhập và hộp thoại yêu cầu hành động." và trong một trình duyệt web không có cách nào để làm những gì bạn đang yêu cầu (kéo lên một lời nhắc thoại với hai trường văn bản nhỏ). Trong trình duyệt web, bạn sẽ thực hiện việc này bằng cách tạo biểu mẫu bằng cách sử dụng html. Nó trông giống như ví dụ 2 ở đây: http://developer.telerik.com/featured/getting-started-nativescript/ là nhiều hơn dọc theo dòng của những gì bạn đang sau.

Answer 3

Bất kỳ ai đến đây khi đang tìm kiếm hộp thoại tùy chỉnh hiển thị. Vui lòng tham khảo this

Tài liệu được viết đúng ở đây cách hiển thị hộp thoại tùy chỉnh trong bản gốc. Cụ thể tìm hàm showModal ở cuối trang. Trong chức năng này người dùng có thể vượt qua trong moduleName (bắt đầu từ gốc ứng dụng), bối cảnh, hàm closeCallBack và boolean để hiển thị phương thức ở chế độ toàn màn hình.