ユーザーインターフェイス / コンポーネント / プレースホルダー

プレースホルダー

プレースホルダーを使用すると、ネイティブウィジェットをアプリケーションに追加できます。 そのためには、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>

デモソース

注釈: NativeScriptのTypeScriptプロジェクトでネイティブAPIを使用するには、プロジェクトにtns-platform-declarationsプラグインを追加する必要があります。 プラグインには、NativeScriptフレームワークによって公開されるネイティブプラットフォームに関する型情報が含まれています。

APIリファレンス プレースホルダークラス

入門

コアコンセプト

ユーザーインターフェース

ツール

ハードウェアアクセス

プラグインの開発

リリース

アプリテンプレート

パフォーマンスの最適化

フレームワークモジュール

ガイド

サポートを受ける

トラブルシューティング

Siedkick