ユーザーインターフェイス / モーダルビュー

モーダルビュー

Viewクラスの"showModal"メソッドを使用して、 別のビューをモーダルダイアログとして表示します。このとき、モーダルページモジュールの場所を指定する必要があります。 モーダルビューが閉じられたときに呼び出されるコンテキストとコールバック関数を指定できます。 オプションで、モーダルビューをフルスクリーンで表示するかどうかを指定することもできます。 モーダルビューを閉じるには、"shownModally"イベントを記述し、 イベント引数によって提供されるcloseCallback関数への参照を保存する必要があります。 モーダルビューを閉じる準備ができたらこの関数を呼び出し、オプションで結果をマスターページに渡します。 メインビューとログインビューの2つのビューがある例を次に示します。 主なものは、ログインビューをモーダルで表示します。ユーザーはユーザー名とパスワードを入力し、準備ができたら[ログイン]ボタンをクリックします。 これにより、モーダルログインビューが閉じられ、ログイン後のメインページにユーザー名/パスワードが返されます。

ヒント： iPhoneの設計では、モーダルビューはフルスクリーンでのみ表示されます。

基本

メインビュー 
<Page xmlns="http://www.nativescript.org/tns.xsd">
	<Page.actionBar>
		<ActionBar title="Getting Started"/>
	</Page.actionBar>

	<GridLayout rows="auto, *">

		<Button text="Open modal" tap="openModal" textWrap="true"/>

	</GridLayout>
</Page>
const modalViewModule = "ns-ui-category/modal-view/basics/modal-view-page";

function openModal(args) {
	const mainView = args.object;
	const option = {
		context: { username: "test_username", password: "test" },
		closeCallback: (username, password) => {
			// Receive data from the modal view. e.g. username & password
			alert(`Username: ${username} : Password: ${password}`);
		},
		fullscreen: true
	};
	mainView.showModal(modalViewModule, option);

}
exports.openModal = openModal;
import { Button } from "tns-core-modules/ui/button";
import { ShowModalOptions } from "tns-core-modules/ui/core/view";
const modalViewModulets = "ns-ui-category/modal-view/basics/modal-ts-view-page";

export function openModal(args) {
	const mainView: Button = <Button>args.object;
	const option: ShowModalOptions = {
		context: { username: "test_username", password: "test" },
		closeCallback: (username, password) => {
			// Receive data from the modal view. e.g. username & password
			alert(`Username: ${username} : Password: ${password}`);
	},
	fullscreen: true
};
mainView.showModal(modalViewModulets, option);
}
モーダルビュー 
<Page xmlns="http://www.nativescript.org/tns.xsd" shownModally="onShownModally">
	<StackLayout>
		<GridLayout rows="100 100" columns="* 2*">
			<Label row="0" col="0" text="Username:" textWrap="true"/>
			<TextField row="0" col="1" hint="username" text="{{ username }}"/>
			<Label row="1" col="0" text="Password:" textWrap="true"/>
			<TextField row="1" col="1" hint="password" secure="true" text="{{ password }}"/>
		</GridLayout>
		<Button text="SingIn" tap="onLoginButtonTap"/>
	</StackLayout>
</Page>
const observableModule = require("tns-core-modules/data/observable");
let closeCallback;

function onShownModally(args) {
	const context = args.context;
	closeCallback = args.closeCallback;
	const page = args.object;
	page.bindingContext = observableModule.fromObject(context);
}
exports.onShownModally = onShownModally;

function onLoginButtonTap(args) {
	const page = args.object.page;
	const bindingContext = page.bindingContext;
	const username = bindingContext.get("username");
	const password = bindingContext.get("password");
	closeCallback(username, password);
}
exports.onLoginButtonTap = onLoginButtonTap;
import { fromObject } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
let closeCallback;

export function onShownModally(args) {
	const context = args.context;
	closeCallback = args.closeCallback;
	const page: Page = <Page>args.object;
	page.bindingContext = fromObject(context);
}

export function onLoginButtonTap(args) {
	const page: Page = <Page>args.object.page;
	const bindingContext = page.bindingContext;
	const username = bindingContext.get("username");
	const password = bindingContext.get("password");
	closeCallback(username, password);
}
注釈： NativeScriptバージョン4.0.0では、別のモーダルビューからモーダルビューを開くことが公式にサポートされています。NativeScriptの以前のバージョンは、単一のモーダルビューのみをサポートしていました。

このドキュメントを改善する

サンプルコード

カスタムアクションバー

NativeScriptバージョン4.0.0では、モーダルビューでカスタムアクションバーを表示することもできます。そのためには、ルートフレームを宣言し、デフォルトのモーダルビューを設定する必要があります。

メインページ 
<Page xmlns="http://www.nativescript.org/tns.xsd">
	<Page.actionBar>
		<ActionBar title="Modal view Navigation"/>
	</Page.actionBar>

	<GridLayout rows="auto, *">

		<Button text="Open modal" tap="openModal" textWrap="true"/>

	</GridLayout>
</Page>
const modalView = "ns-ui-category/modal-view/custom-actionbar/modal-root";

function openModal(args) {
	const mainpage = args.object.page;
	const option = {
		context: "some context",
		closeCallback: () => {},
		fullscreen: true
	};
	mainpage.showModal(modalView, option);
}
exports.openModal = openModal;
import { Page } from "tns-core-modules/ui/page";
import { ShowModalOptions } from "tns-core-modules/ui/core/view";
const modalView = "ns-ui-category/modal-view/custom-actionbar/modal-ts-root";

export function openModal(args) {
const mainpage: Page = <Page>args.object.page;
	const option: ShowModalOptions = {
		context: "some context",
		closeCallback: () => {},
		fullscreen: true
	};
	mainpage.showModal(modalView, option);
}
モーダルルート 
<Frame defaultPage="ns-ui-category/modal-view/custom-actionbar/modal-view-page"/>
<Frame defaultPage="ns-ui-category/modal-view/custom-actionbar/modal-ts-view-page"/>
モーダルビュー 
<Page backgroundColor="green" showingModally="onShowingModally">
	<Page.actionBar>
		<ActionBar backgroundColor="red" title="Modal view" icon="">
		</ActionBar>
	</Page.actionBar>
	<StackLayout backgroundColor="lightGreen">
		<Label text="Modal view with ActionBar" style="text-align:center;" textWrap="true"/>
		<Button text="Close Modal" tap="onCloseModal"/>
	</StackLayout>
</Page>
function onShowingModally(args) {
	console.log("onShowingModally");
}
exports.onShowingModally = onShowingModally;

function onCloseModal(args) {
	args.object.closeModal();
}
exports.onCloseModal = onCloseModal;
export function onShowingModally(args) {
	console.log("onShowingModally");
}

export function onCloseModal(args) {
	args.object.closeModal();
}

このドキュメントを改善する

デモコード

NativeScriptバージョン4.0.0以降では、モーダルビュー内をナビゲートできます。最初のモーダルビューをデフォルトとするルートフレームが必要です。 Frameインスタンスを使用すると、モーダル内を移動でき、 "closeModal"メソッドを使用して、 任意のViewインスタンスからモーダルを閉じることができます。

メインページ 
<Page xmlns="http://www.nativescript.org/tns.xsd">
	<Page.actionBar>
		<ActionBar title="Modal view Navigation"/>
	</Page.actionBar>

	<GridLayout rows="auto, *">

		<Button text="Open modal" tap="openModal" textWrap="true"/>

	</GridLayout>
</Page>
const modalView = "ns-ui-category/modal-view/modal-navigation/modal-root";

function openModal(args) {
	const mainpage = args.object.page;
	const options = {
		context: "some context",
		closeCallback: () => {
		},
		fullscreen: true
	};
	mainpage.showModal(modalView, options);
}
exports.openModal = openModal;
import { ShowModalOptions } from "tns-core-modules/ui/core/view";
const modalView = "ns-ui-category/modal-view/modal-navigation/modal-root";

function openModal(args) {
	const mainpage = args.object.page;
	const options: ShowModalOptions = {
		context: "some context",
		closeCallback: () => {},
		fullscreen: true
	};
	mainpage.showModal(modalView, options);
}
exports.openModal = openModal;
モーダルルート 
<Frame defaultPage="ns-ui-category/modal-view/modal-navigation/first-modal-view-page"
		shownModally="onShownModally"
		showingModally="onShowingModally"/>
<Frame defaultPage="ns-ui-category/modal-view/modal-navigation/first-modal-ts-view-page"
		shownModally="onShownModally"
		showingModally="onShowingModally"/>
最初のモーダルビュー 
<Page backgroundColor="green" loaded="onPageLoaded">
	<StackLayout backgroundColor="lightGreen">
		<Button text="Navigate" tap="onNavigate"/>
		<Button text="Close Modal" tap="onCloseModal"/>
	</StackLayout>
</Page>
function onNavigate(args) {
	const view = args.object;
	const page = view.page;
	page.frame.navigate("ns-ui-category/modal-view/modal-navigation/second-modal-view-page");
}
exports.onNavigate = onNavigate;

function onPageLoaded(args) {
	console.log("onPageLoaded");
}
exports.onPageLoaded = onPageLoaded;

function onCloseModal(args) {
	args.object.closeModal();
}
exports.onCloseModal = onCloseModal;
import { Page } from "tns-core-modules/ui/page";
export function onNavigate(args) {
	const view = args.object;
	const page: Page = <Page>view.page;
	page.frame.navigate("ns-ui-category/modal-view/modal-navigation/second-modal-ts-view-page");
}

export function onPageLoaded(args) {
	console.log("onPageLoaded");
}

export function onCloseModal(args) {
	args.object.closeModal();
}
2番目のモーダルビュー 
<Page class="page">
	<StackLayout>
		<Label style="text-align:center;" text="Second view"/>
		<Button text="Navigate Back" tap="onGoBack"/>
		<Button text="Close Modal" tap="onCloseModal"/>
	</StackLayout>
</Page>
function onGoBack(args) {
	const view = args.object;
	const page = view.page;

	page.frame.goBack();
}
exports.onGoBack = onGoBack;

function onCloseModal(args) {
	args.object.closeModal();
}
exports.onCloseModal = onCloseModal;
import { Page } from "tns-core-modules/ui/page";

export function onGoBack(args) {
	const view = args.object;
	const page: Page = view.page;

	page.frame.goBack();
}

export function onCloseModal(args) {
	args.object.closeModal();
}

このドキュメントを改善する

デモコード

入門
コアコンセプト
ユーザーインターフェース
ツール
ハードウェアアクセス
プラグインの開発
リリース
アプリテンプレート
パフォーマンスの最適化
フレームワークモジュール
ガイド
サポートを受ける
トラブルシューティング
Siedkick
NativeScriptドキュメントのライセンス