Nativescript 背景图像全屏

Posted 2023-02-19

【中文标题】Nativescript 背景图像全屏

【英文标题】：Nativescript background-image fullscreen

【发布时间】：2016-07-29 18:58:22

【问题描述】：

我想在 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"  ></Image>

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