状态栏下方的 Nativescript 操作栏答案

【问题标题】：Nativescript Action Bar underneath status bar状态栏下方的 Nativescript 操作栏
【发布时间】：2026-02-11 16:20:09
【问题描述】：

我正在尝试创建一个 Nativescript Vue 应用，在我的 Android 10 设备（三星 S10+）上进行测试时，状态栏部分覆盖了操作栏。

即使在 Playground 应用中也可以看到效果。

可以通过删除 android 配置中的透明状态栏选项来解决此问题。但这意味着状态栏的颜色不会是动态的。

有人遇到这种情况吗？

【问题讨论】：

三星总是强硬，他们在他们的设备上做了很多定制。您是否尝试在页面的原生视图上将 fitsSystemWindows 设置为 true。
我试试看，谢谢。我还会启动我的旧 Google Pixel 并尝试使用它。

标签： javascript android vue.js nativescript nativescript-vue

【解决方案1】：

Nativescript 在APP_resources/Android/src/main/res/values-21/styles.xml 下添加了默认配置，您可以在其中更改通知栏的行为，以及它应如何处理特定设备的屏幕截图。

这意味着你可以设置无半透明通知栏，如果没有ActionBar，则删除默认填充（actionBarHidding = true）。

PS1：我不知道为什么这里需要代码，这是一个简单的更改，但是你去：

<!-- Application theme -->
<style name="AppThemeBase21" parent="AppThemeBase">
    <item name="android:windowTranslucentStatus">false</item>
    <item name="android:datePickerStyle">@style/SpinnerDatePicker</item>
    <item name="android:timePickerStyle">@style/SpinnerTimePicker</item>
    <item name="android:windowLayoutInDisplayCutoutMode">default</item>
</style>

<style name="AppTheme" parent="AppThemeBase21">
</style>

<!-- Default style for DatePicker - in spinner mode -->
<style name="SpinnerDatePicker" parent="android:Widget.Material.Light.DatePicker">
    <item name="android:datePickerMode">spinner</item>
</style>

<!-- Default style for TimePicker - in spinner mode -->
<style name="SpinnerTimePicker" parent="android:Widget.Material.Light.TimePicker">
    <item name="android:timePickerMode">spinner</item>
</style>

<style name="NativeScriptToolbarStyle" parent="NativeScriptToolbarStyleBase">
    <item name="android:elevation">4dp</item>
    <!-- <item name="android:paddingTop">24dp</item> -->
</style>

【讨论】：

请不要只发布一些工具或库作为答案。至少在答案本身中展示how it solves the problem。
您可以考虑从屏幕截图中发布实际的 XML 吗？我认为它会提高答案的可读性