ユーザーインターフェイス /
コンポーネント / 画像
画像
Imageウィジェットは、モバイルアプリケーションに画像を表示します。
使用法
<Image src="res://icon" stretch="aspectFill" />
<Image src="~/images/logo.png" stretch="aspectFill" />
<Image src="https://www.nativescript.org/images/default-source/Blogs/ns-logo_share_600x315.png" stretch="aspectFill" />
<Image src="{{ imageUri }}" width="100" height="100" stretch="aspectFill" />
const Observable = require("tns-core-modules/data/observable").Observable;
function onNavigatingTo(args) {
const view = args.object;
const vm = new Observable();
vm.set("imageUri", "~/images/logo.png");
view.bindingContext = vm;
}
exports.onNavigatingTo = onNavigatingTo;
import { EventData, Observable } from "tns-core-modules/data/observable";
import { View } from "tns-core-modules/ui/core/view";
export function onNavigatingTo(args: EventData) {
const view = <View>args.object;
const vm = new Observable();
vm.set("imageUri", "~/images/logo.png");
view.bindingContext = vm;
}
Image {
width: 50;
height: 50;
}
.fas {
font-family: "Font Awesome 5 Free", "fa-solid-900";
font-weight: 900;
}
.t-36 {
font-size: 36;
}
デモソース
スタイリング
<StackLayout height="100%" class="m-15" backgroundColor="lightgray" loaded="containerLoaded">
<Image row="0" col="0" src="font://" class="fas t-36"/>
<!-- Image with stretch property ("none", "aspectFill" and "aspectFit") -->
<Image src="res://logo_white_bg" stretch="aspectFill"/>
</StackLayout>
const Image = require("tns-core-modules/ui/image").Image;
function containerLoaded(args) {
const container = args.object;
const newImage = new Image();
const imageString = String.fromCharCode(0xF2b9);
newImage.src = `font://${imageString}`;
newImage.className = "font-awesome font-size";
newImage.width = 49;
newImage.height = 49;
container.addChild(newImage);
}
exports.containerLoaded = containerLoaded;
import { EventData } from "tns-core-modules/data/observable";
import { Image } from "tns-core-modules/ui/image";
import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout";
export function containerLoaded(args: EventData) {
const container = <StackLayout>args.object;
const newImage = new Image();
const imageString = String.fromCharCode(0xF2b9);
newImage.src = "font://" + imageString;
newImage.className = "font-awesome font-size";
newImage.width = 49;
newImage.height = 49;
container.addChild(newImage);
}
Image {
width: 100;
height: 100;
}
.fas {
font-family: "Font Awesome 5 Free", "fa-regular-400";
font-weight: 900;
}
.t-36 {
font-size: 36;
}
デモソース
プロパティ
名前 |
タイプ |
説明 |
decodeHeight | Length | [Androidのみ]目的の画像のデコード高さを取得または設定します。 |
decodeWidth | Lengt | [Androidのみ]画像の目的のデコード幅を取得または設定します。 |
isLoaded | boolean | 画像がロードされているかどうかを示す値を取得します。 |
isLoading | boolean | 画像が現在ロードされているかどうかを示す値を取得します。 |
loadMode | "sync","async" | ローカルファイルシステム上のイメージのロード戦略を取得または設定します。 |
src | string | 画像のソースを取得または設定します。 これは、URL文字列またはネイティブイメージインスタンスのいずれかです。 |
stretch | Stretch | 画像ストレッチモードを取得または設定します。 |
tintColor | Color | テンプレート画像の色合いに使用される色。 |
APIリファレンス
ネイティブコンポーネント