Nativescript 背景图像全屏答案

【问题标题】：Nativescript background-image fullscreenNativescript 背景图像全屏
【发布时间】：2023-03-16 18:29:01
【问题描述】：

我想在 Nativescript 中使用页面上的全屏图像创建应用程序。我必须使用background-image: url('~/images/background.jpg');。但是如何让它全屏。感谢您的帮助

【问题讨论】：

请向我们展示您的尝试。为我们提供一个最小的、完整的、可验证的例子MVCE

【解决方案1】：

您需要使用支持的 NativeScript CSS properties 来实现这一点。

我之前在附加到 <Page> 视图的背景图像上使用了以下 CSS，它工作正常。

.coverImage {
    background-image: url('~/images/kiss.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

【讨论】：

是的，您需要在 img 路径周围使用url()。

【解决方案2】：

如果您希望 Page 具有全屏图像背景，请将您的图像添加到 /App_Resources 并在您的组件中执行此操作：

export class MyComponent implements OnInit {
    constructor(private page:Page) {}
    ngOnInit() {
        this.page.actionBarHidden = true;
        this.page.backgroundImage = "res://bg-image";
    }
}

更新：您可以添加 CSS 以强制全屏。

.page {
    /* background-image: url("res://bg-image") */
    background-size: cover;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */ /* not supported in {N} yet */
    background-position: center top; /* instead set ypos to top to avoid scroll-up */
}

注意：将此 CSS 类分配给您的 Page。

【讨论】：

不幸的是，这不会将其缩放到全屏。
它确实适用于 CSS，但不幸的是，如果我使用任何 CSS，当软键盘进入视野时，背景图像会被向上推。
@BenMorris 试试background-attachment: fixed
@BenMorris 似乎 {N} 不支持 background-attachment。所以background-position: center top 应该修复它。

【解决方案3】：

如果您将 nativeScipt 与 Angular 一起使用，则可以使用：

/*In your .css: */

.my-class {
    background-image: url("res://image-name.png") no-repeat;
}

<!-- in your .html: -->

<ScrollView class="my-class">

【讨论】：

【解决方案4】：

这不适用于动画 gif。我的风格：

.page{
    background-image: url("~/assets/images/animated.gif") black;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

显示的 gif，居中和放大，非常棒，但是是静态的：动画不会移动。

【讨论】：

【解决方案5】：

这对我有用：

constructor(private page: Page) { }

ngOnInit() {
  this.page.actionBarHidden=true;`
  this.page.backgroundImage = 'res://gold_bg';
  this.page.style.backgroundSize='cover';
  this.page.style.backgroundRepeat='no-repeat';
}

【讨论】：

【解决方案6】：

我有一张非常大的图片，其中background-size: cover; 在横向（挤压和狭窄）/纵向（超出页面）中都没有很好地显示图片

最终最适合我的是添加一个Image 元素，并将其设置为背景

<Image src="~/assets/images/background.jpg" stretch="aspectFill" left="0" top="0" width="100%" height="100%"></Image>

<AbsoluteLayout>
    <Image src="~/assets/images/background.jpg" stretch="aspectFill" left="0" top="0" width="100%" height="100%"></Image>
    <StackLayout top="0" left="0" width="100%" height="100%">
        ... usual content here
    </StackLayout>
</AbsoluteLayout>

【讨论】：