リソースフォルダーの画像の操作

この記事では、両方のプラットフォームのApp_Resourcesフォルダーに画像を追加する方法について説明します。

アイコンを生成してリソースフォルダーに追加する

これを実現するには、NativeScript Image Builderまたは画像編集に使用できる他のツールを使用してアイコンを生成する必要があります。 必要なデバイス画面密度の画像を作成したら、以下で説明する必要なフォルダーにそれらを追加する必要があります。

Androidリソースの追加

Androidリソースは、アプリのApp_Resources\Android\src\main\resフォルダー内の対応するdrawable-XXXフォルダーに追加する必要があります。

NativeScript CLIによってアプリが準備されると、このディレクトリのコンテンツがplatforms\android\res内部にコピーされます。 Androidで描画可能リソースを使用する方法の詳細については、こちらをご覧ください。

iOSリソースの追加

IOSリソースは、アプリのApp_Resources\iosフォルダー内に追加する必要があります。 @1x、@2xおよび@3xサフィックスを使用して、特定の画面スケールのデバイスをターゲットにできます。 各スケールファクターのデバイスのリストは次のとおりです。

• @1x -iPad 2およびiPad mini（第1世代）
• @2x -iPhone 6、iPhone Xr、iPad（retina）
• @3x -iPhone 6 Plus、iPhone X、iPhone Xs

詳細については、iOS開発者ライブラリのアイコンと画像のサイズを参照してください。

NativeScriptプロジェクトが準備されると（tns prepare ios）すべての画像がplatforms\ios\<project-name>\Resourcesディレクトリにコピーされます。

リソースから画像を読み込む

<Image src="res://logo" stretch="none" />

resourceからImageSourceインスタンスを手動で作成できます。

リソースからTabViewにアイコンを読み込む

<TabView id="tabViewContainer" iosIconRenderingMode="alwaysOriginal">
	<TabView.items>
		<TabViewItem title="Tab 1" iconSource="res://icon">
			<TabViewItem.view>
				<Label text="This is Label in Tab 1" />
			</TabViewItem.view>
		</TabViewItem>
		<TabViewItem title="Tab 2" iconSource="res://icon">
			<TabViewItem.view>
				<Label text="This is Label in Tab 2" />
			</TabViewItem.view>
		</TabViewItem>
	</TabView.items>
</TabView>

アプリケーションアイコンの変更

NativeScriptの最新バージョンでは、CLIを使用して、指定された画像に基づいてAndroidおよびiOSのアプリケーションアイコンを生成し、 適切なリソースフォルダー（AndroidではApp_Resources\Android\src\main\res\drawable-XXX、iOSではApp_Resources\iOS）に自動的に追加できます。 これを達成するために、tns resources generate icons <path to image>コマンドを使用します。