安卓上的状态栏重叠应用程序

Question

我正在通过学习 udemy 上的本课程来学习原生脚本，在我的代码的第一行，我在 Android 上遇到了一个问题。

我刚刚创建了一个带有堆栈布局和标签内的组件。当我在ios和Android模拟器上运行它时，ios上一切都很好。但是在安卓上，标签在状态栏后面。我尝试在我的真实安卓设备上运行它，结果是一样的。 该项目非常简单，我基本上运行TNS创建，删除了所有不必要的组件和路由内容。然后添加了这个非常基本的组件。根本不涉及 css 规则。

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

Answer 1

我遇到了同样的问题，现在通过更改以下代码可以修复它：

导航到"App_Resources/Android/src/main/res/values/styles.xml"和"values-v21/styles.xml

并要么使以下代码false而不是true，要么完全删除它。

<item name="android:windowTranslucentStatus">true</item>

它将解决您的问题。

Answer 2

我的情况你是对的。预览版的行为不能保证与真实版本的行为 100% 匹配。 以下是更多信息：https://nativescript.org/blog/nativescript-preview/同样，在您的情况下，您在 android 上的预览中看到的栏是预览应用的状态栏，而不是您的应用。

此行为可能取决于：

1. NativeScript flavor (vue， angular， core...(
布局
2. 顺序(某些布局的行为不同(
3. 原生脚本的版本
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 核心 6.5.1。 较新的版本可能会解决安卓上状态栏的一些问题。