如何在 nativescript 中显示模态视图时将窗口背景变为黑色

Posted

技术标签:

【中文标题】如何在 nativescript 中显示模态视图时将窗口背景变为黑色【英文标题】:How to turn window background black on showing modal view in nativescript 【发布时间】:2020-09-09 17:21:06 【问题描述】:

如下图 1 所示,当 ios 13 上的模态视图出现时,默认背景为黑色。但是在nativescript上,默认的背景是白色的,如图2。如何使用nativescript核心实现图像1的背景(黑色)?我尝试更改状态栏的颜色,但实际上更改了图像中部分可见的首页部分的颜色。我试图在 Frame css 上定义背景颜色,但没有奏效。有什么建议?提前致谢。

图片1:

图片2:

模态视图选项:

const option: ShowModalOptions = 
    context:  selectedAccount: account ,
    closeCallback: (a, b, c, action) => 
        //some code
    ,
    fullscreen: false
;
mainView.showModal("./modal-add-page", option);

【问题讨论】:

【参考方案1】:

您必须在 iOS 上设置窗口的背景颜色。

更新:Nativescript 7

import * as app form "@nativescript/core/application";
import  Color  from "@nativescript/core/color";
import  isIOS  from '@nativescript/core';
    
if (isIOS) 

   if (app.hasLaunched) 
      app.ios.window.backgroundColor = new Color("black").ios;

    else 
     app.on("launch", _ =>  app.ios.window.backgroundColor = new Color("black").ios)

   

旧版本:

import * as app form "tns-core-modules/application";
import  Color  from "tns-core-modules/color";

// You must run it once application is initiated
app.ios.window.backgroundColor = new Color("black").ios;

【讨论】:

以上是关于如何在 nativescript 中显示模态视图时将窗口背景变为黑色的主要内容,如果未能解决你的问题,请参考以下文章

在 nativescript-vue 视图模式组件中显示数组数据

无法在 NativeScript Vue 模态中访问道具

如何防止状态栏覆盖nativescript中的模态页面

关闭表格视图控制器上方的模态显示视图控制器时,如何从表格视图控制器中取消选择行?

为啥我的 Nativescript-vue 应用程序在呈现模态之前使用硬件后退按钮时崩溃?

不希望模态视图在键盘显示上向上移动