android上的状态栏重叠应用

Question

我正在通过udemy 上的这门课程学习本机脚本，并且在我的代码的第一行中，我在 Android 上遇到了问题。

我刚刚创建了一个带有 Stacklayout 和标签的组件。当我在 ios 和 android 模拟器上运行它时，在 ios 上一切正常。但在 android 上，标签在状态栏后面。我试图在我真正的 android 设备上运行它，结果是一样的。项目真的很简单，我基本都是跑TNS create，删掉所有不需要的组件和路由的东西。然后添加了这个非常基础的组件。根本不涉及 CSS 规则。

在这个课程的视频中，老师没有这个问题。我的配置有什么问题？

Answer 1

我的情况你是对的。不保证预览的行为与真实构建的行为 100% 匹配。以下是更多信息：https://nativescript.org/blog/nativescript-preview/ 另外，在您的情况下，您在 Android 预览中看到的栏是预览应用程序的状态栏的状态，而不是您的应用程序的状态。

此行为可能取决于：

1. NativeScript 风格（vue、Angular、Core...）
2. 布局顺序（某些布局的行为不同）
3. NativeScript的版本
4. 手机操作系统版本
5. 使用的所有包

可能有多种方法可以解决状态栏问题。

在我的例子中，我在页面标签上使用了backgroundSpanUnderStatusBar来指示状态栏颜色应该与顶部组件的背景相同。

在 IOS 上这很棒。但在 Android 上，我的应用程序在状态栏“下方”启动。这与问题的描述行为相同。这是因为状态栏是特定于操作系统的。

我发现的解决方案/作弊（灵感来自我不记得的插件）。计算Os状态栏的高度并向根元素添加顶部填充。这是计算的高度函数：

import * as application from 'tns-core-modules/application';
import * as utils from 'tns-core-modules/utils/utils';

getStatusBarHeight() {
  let result = 0;
  if (application.android) {
    const resourceId = (application.android.foregroundActivity || application.android.startActivity).getResources().getIdentifier('status_bar_height', 'dimen', 'android');
    if (resourceId) {
      result = (application.android.foregroundActivity || application.android.startActivity).getResources().getDimensionPixelSize(resourceId);

      result = utils.layout.toDeviceIndependentPixels(result);
    }
  }
  return result;
},

并与 NativeScript vue 一起使用：

<DockLayout :paddingTop="getStatusBarHeight()"></DockLayout>

请注意，如果在 ios 和 android 上返回计算值，则返回 0。这是一种作弊，但效果很好。

我正在运行 tns-core 6.5.1。新版本可能会修复 Android 上状态栏的一些问题。