android - 如何在 Android 上使用 NativeScript 和 Angular 更改 StatusBar 颜色或将其设置为透明？

Question

我正在将 NativeScript 与 Angular 一起使用，并且我似乎无法更改项目中的 StatusBar 颜色或将其设置为透明(任何这些都可以)。相反，它不是完全透明的，而是半透明的黑色，因此背景在其后面滚动，但被 StatusBar 变暗。我想将其设置为透明或更改颜色(与页面背景相同)

我尝试过的:

• 更改 App_Resources/Android/src/main/res/values/colors.xml 中的“ns_primaryDark”和“ns_primary”颜色(如果我将 TranslucentStatus” 设置为 false，则可在启动屏幕上使用；
• 设置<item name="android:windowTranslucentStatus"></item>在<style name="AppThemeBase" parent="Theme.AppCompat.Light.NoActionBar">尽管在 <style name="LaunchScreenThemeBase" parent="Theme.AppCompat.Light.NoActionBar"> 上工作正常，但 App_Resources/Android/src/main/res/values/styles.xml 中的内容没有任何区别。 (启动屏幕)；
• 设置<item name="android:windowLightStatusBar">true</item>将文本颜色更改为黑色并适用于启动屏幕和主应用程序；
• 在任何组件的构造函数中使用下面的代码不会改变我的应用程序中的任何内容，但它适用于我尝试过的其他项目(详细信息如下)，将颜色设置为黑色:

let window = app.android.startActivity.getWindow();
window.setStatusBarColor(new Color("black").android);

我还尝试过的一件事是在我下载的另一个项目上执行这些步骤(确切地说是https://github.com/NativeScript/nativescript-ui-samples/tree/master/chart这个)并且它有效，所以我认为我在应用程序中使用的模板可能会“覆盖”StatusBar 的任何设置。

然后，我尝试使用与我的模板相同的模板创建一个新项目，但我发现它也不起作用。是我的模板有问题吗？如果是这样，有什么办法可以绕过它吗？

我使用的模板是这个:https://github.com/NativeScript/nativescript-app-templates/tree/master/packages/template-tab-navigation-ng (也适用于“tns create my-app-name --template tns-template-tab-navigation-ng”)。

提前非常感谢。

Answer 1

将以下代码添加到您的 main.ts 中，即可完成工作。

import * as application from "tns-core-modules/application";

declare var android;

application.android.on(application.AndroidApplication.activityCreatedEvent, (event) => {

    const activity = event.activity;

    if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
        activity.getWindow().addFlags(android.view.WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
        activity.getWindow().clearFlags(android.view.WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        activity.getWindow().addFlags(android.view.WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
        activity.getWindow().setStatusBarColor(android.graphics.Color.TRANSPARENT);
    } else {
        activity.getWindow().addFlags(android.view.WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    }

    const parent = activity.findViewById(android.R.id.content);
    for (let i = 0; i < parent.getChildCount(); i++) {
        const childView = parent.getChildAt(i);
        if (childView instanceof android.view.ViewGroup) {
            childView.setFitsSystemWindows(true);
            childView.setClipToPadding(true);
        }
    }
});

这和图书馆里的差不多。如果您想使用该库，则必须将其包含在您的应用程序中并访问 StatusBarUtil 类。