如何使用NativeScript和Angular 2将自定义图像用作资源?

时间:2016-04-18 14:52:29

标签: android angular nativescript

我关注tjvantoll教程here关于使用NativeScript 1.7 + Angular 2开发应用程序。

我使用NativeScript Image Builder创建图像。我的自定义图片为" logo_login "并且NativeScript创建的默认图像是" 图标"。这是代码:

import {Component} from "angular2/core";
var imageSource = require("image-source");

var img = imageSource.fromResource("logo_login");

@Component({
   selector: "myapp",
   template: `
   <StackLayout>
     <Image src="res://icon" stretch="none" horizontalAlignment="center">  </Image>
     <Button text="Sign in" id="submit-button" (tap)="submit()"></Button>
     <Button text="Sign up"></Button>
   </StackLayout>
  `,
  styleUrls: ["views/login/login-common.css", "views/login/login.css"]
 })
export class AppComponent {
  submit(){
    console.log(img);
  }
}

当我运行应用程序时, console.log(img)返回 null ,但 src =&#34; res:// icon&#34; < / strong>返回图标图片。

那么如何在使用NativeScript + Angular时修复自定义图像的使用?

2 个答案:

答案 0 :(得分:2)

以下是一些如何通过Angular 2和NativeScript

动态加载图像的方法

import { Component, ViewChild, ElementRef, Injectable } from "angular2/core";

var imageSource = require("image-source");

var imgSrc = imageSource.fromResource("logo_login");

@Component({
  selector: "myapp",
  template: `
    <StackLayout>
        <Image #myImage stretch="none" horizontalAlignment="center"></Image>
        <Button text="Change pic" (tap)="submit('res://logo_login')"></Button>
    </StackLayout>
  `
})

export class AppComponent {

  // similar to getViewById
  @ViewChild("myImage") myImageRef: ElementRef;

  // logo_login.png from App_Resources/Android/drawable-hdpi, drawable-ldpi and drawable-mdpi
  imgNativeSource = 'res://logo_login'; 

  // logo_login.png from local app_folder
  imgAppSource = "~/app_folder/logo_login"

  // angular2 method triggers after view init
  ngAfterViewInit() {
    this.myImageRef.nativeElement.src = "res://icon";
  }

  // custom func with params
  submit(source) {
    this.myImageRef.nativeElement.src = source;

    // this.myImageRef.nativeElement.src = this.imgNativeSource;
  }
}

请注意,Android表示“位图图片.Android支持三种格式的位图文件:.png(首选),.jpg(可接受),。gif(不鼓励)。”但仍然是最好的特别是App_resources的选择是使用transperant png文件。

答案 1 :(得分:1)

我正在运行:tns livesync android --emulator --watch并在此处退出问题:livesync synchonize images

所以只需要运行:tns run android