プレースホルダーを使用すると、ネイティブウィジェットをアプリケーションに追加できます。 そのためには、UI階層のどこかにプレースホルダーを配置し、そこに表示するネイティブウィジェットを作成して構成する必要があります。 最後にネイティブウィジェットをcreatingViewのイベント引数に渡します。
const placeholderModule = require("tns-core-modules/ui/placeholder");
import { Placeholder } from "tns-core-modules/ui/placeholder";
この例は、PlaceholderのcreatingViewイベントを介して、ネイティブビューを作成、表示する方法を示しています。
<StackLayout>
<Placeholder creatingView="creatingView" />
</StackLayout>
function creatingView(args) {
let nativeView;
if (platformModule.isIOS) {
nativeView = UITextView.new();
nativeView.text = "Native View (iOS)";
} else if (platformModule.isAndroid) {
nativeView = new android.widget.TextView(utils.ad.getApplicationContext());
nativeView.setText("Native View (Android)");
}
args.view = nativeView;
}
exports.creatingView = creatingView;
export function creatingView(args) {
let nativeView;
if (isIOS) {
nativeView = UITextView.new();
nativeView.text = "Native View (iOS)";
} else if (isAndroid) {
nativeView = new android.widget.TextView(ad.getApplicationContext());
nativeView.setText("Native View (Android)");
}
args.view = nativeView;
}
この例は、コードビハインドを用いてPlaceholderのcreatingViewイベントを介し、ネイティブビューを作成、表示する方法を示しています。
<StackLayout loaded="onLayoutLoaded">
</StackLayout>
function onLayoutLoaded (ltargs) {
const layout = ltargs.object;
const placeholder = new placeholderModule.Placeholder();
placeholder.on("creatingView", (args) => {
let nativeView;
if (platformModule.isIOS) {
nativeView = UITextView.new();
nativeView.text = "Native View (iOS)";
} else if (platformModule.isAndroid) {
nativeView = new android.widget.TextView(utils.ad.getApplicationContext());
nativeView.setText("Native View (Android)");
}
args.view = nativeView;
});
layout.addChild(placeholder);
}
exports.onLayoutLoaded = onLayoutLoaded;
export function onLayoutLoaded (ltargs) {
let layout: StackLayout = ltargs.object;
let placeholder = new Placeholder();
placeholder.on("creatingView", (args) => {
let nativeView;
if (isIOS) {
nativeView = UITextView.new();
nativeView.text = "Native View (iOS)";
} else if (isAndroid) {
nativeView = new android.widget.TextView(ad.getApplicationContext());
nativeView.setText("Native View (Android)");
}
args.view = nativeView;
});
layout.addChild(placeholder);
}
この例は、プラットフォーム固有のJavaScriptファイルを使用し、Placeholderを介してネイティブウィジェットを定義する方法を示しています。
<StackLayout>
<Placeholder creatingView="creatingView"/>
</StackLayout>
function creatingView(args) {
const nativeView = new android.widget.TextView(args.context);
nativeView.setSingleLine(true);
nativeView.setEllipsize(android.text.TextUtils.TruncateAt.END);
nativeView.setText("Native View - Android");
args.view = nativeView;
}
exports.creatingView = creatingView;
export function creatingView(args) {
const nativeView = new android.widget.TextView(args.context);
nativeView.setSingleLine(true);
nativeView.setEllipsize(android.text.TextUtils.TruncateAt.END);
nativeView.setText("Native View - Android");
args.view = nativeView;
}
function creatingView(args) {
const nativeView = new UILabel();
nativeView.text = "Native View - iOS";
args.view = nativeView;
}
exports.creatingView = creatingView;
export function creatingView(args) {
const nativeView = UILabel.new();
nativeView.text = "Native View - iOS app";
args.view = nativeView;
}
APIリファレンス プレースホルダークラス