0

我正在尝试创建背景图像，但我似乎无法这样做.. 我看了这个问题：

Nativescript 背景图像全屏

但没有任何运气。它没有显示足够的标记，而且那里的 OP 似乎也没有使用nativescript-angular，因为当你<Page></Page>按照建议使用时，你会得到一个错误。

这个问题说不应该与Page角度一起使用，我很肯定我在文档中读过同样的东西。

我使用这个CSS：

.login-page {
  width: 100%;
  height: 100%;
  padding: 40px 60px;
  background-image: ~/assets/img/login.jpg;
  background-position: 50% 50%;
  background-size: cover;
  background-color: blue;
}

使用此模板：

<StackLayout class="login-page text-center" orientation="vertical" [formGroup]="loginForm">
  <StackLayout class="input-field m-b-20">
    <TextField class="input input-rounded" formControlName="email" hint="Email"></TextField>
  </StackLayout>
  <StackLayout class="input-field">
    <TextField class="input input-rounded" formControlName="password" hint="Password" secure="true"></TextField>
  </StackLayout>
</StackLayout>

图像位于app/assets/img/login.jpg. 任何想法为什么这不起作用？

4

1 回答 1

1

在组件Login.ts：

import { Page } from "ui/page";

export class LoginComponent {
  constructor(private page:Page) {
    page.backgroundImage = '~/images/login.jpg';
  }   
}

必须在应用程序根目录创建一个名为 images 的文件夹，如 Nativescript 文档所说。

于 2017-04-21T21:54:32.320 回答