この記事では、両方のプラットフォームのApp_Resourcesフォルダーに画像を追加する方法について説明します。
注釈:
NativeScriptは、PNG
またはJPG
ファイルとしてエンコードされた画像をサポートしています。
注釈: リソースフォルダーから画像を読み込むには、res://プレフィックスを使用する必要があります。 これは、現在のデバイスの画面密度に最適な画像を読み込むために推奨されるアプローチです。 リソースイメージを参照する場合、ファイル拡張子は含まれません。
これを実現するには、NativeScript Image Builderまたは画像編集に使用できる他のツールを使用してアイコンを生成する必要があります。 必要なデバイス画面密度の画像を作成したら、以下で説明する必要なフォルダーにそれらを追加する必要があります。
Androidリソースは、アプリのApp_Resources\Android\src\main\resフォルダー内の対応するdrawable-XXXフォルダーに追加する必要があります。
NativeScript CLIによってアプリが準備されると、このディレクトリのコンテンツがplatforms\android\res内部にコピーされます。 Androidで描画可能リソースを使用する方法の詳細については、こちらをご覧ください。
IOSリソースは、アプリのApp_Resources\iosフォルダー内に追加する必要があります。 @1x、@2xおよび@3xサフィックスを使用して、特定の画面スケールのデバイスをターゲットにできます。 各スケールファクターのデバイスのリストは次のとおりです。
詳細については、iOS開発者ライブラリのアイコンと画像のサイズを参照してください。
NativeScriptプロジェクトが準備されると(tns prepare ios)すべての画像がplatforms\ios\<project-name>\Resourcesディレクトリにコピーされます。
<Image src="res://logo" stretch="none" />
resourceからImageSourceインスタンスを手動で作成できます。
<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>コマンドを使用します。