NativeScript System UI

一个用于更改系统 UI 的 NativeScript 插件。

IOS

要显示/隐藏状态栏，您需要在您的 Info.plist 中将 UIViewControllerBasedStatusBarAppearance 设置为 false

用法

npm install nativescript-systemui --save

如果您正在使用 ^1.0.0 版本，那么我们现在使用混入

import { installMixins } from 'nativescript-systemui';
installMixins();

然后在 Page 类中添加新属性

• statusBarColor（CSS 属性 status-bar-color）
• navigationBarColor（CSS 属性 navigation-bar-color）

对于 < 1.0.0 版本

然后在您的 NativeScript 项目 .xml 文件中，添加插件的命名空间。我在这里将其称为 "x"，但您可以将其命名为任何您想要的名称。

仅限 iOS 支持 一组设置（默认、浅色、深色、不透明），而不是特定的颜色。Android 将支持任何十六进制背景颜色，但您无法更改状态栏上的文本颜色。

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:x="nativescript-systemui"> 
      
      <!-- Use the tag with StatusBar to style it 
           Available ios settings:
           default 
           light 
           dark
           opaque
      -->
      <x:StatusBar ios:barStyle="light" barColor="#00A7DC" />
      <x:NavigationBar barColor="#00A7DC" />
</Page>

这些设置，加上具有 background-color: #00C0F5 的ActionBar，将给您...

注意 如果您没有ActionBar，系统UI插件不会在iOS上设置状态栏的颜色。如果您想在 NativeScript 中设置状态栏的颜色而不使用ActionBar，您可以通过将 backgroundSpanUnderStatusBar="true" 设置为页面背景颜色来设置它。否则，无论您做什么，状态栏都将为白色。

使用 Vue.js

在您的根 app.js

import StatusBarPlugin from 'nativescript-systemui/vue';
Vue.use(StatusBarPlugin);

在您的组件中

<Page class="page" actionBarHidden="true" backgroundSpanUnderStatusBar="true">
      <StatusBar barColor="#32475b" />
      <NavigationBar barColor="#32475b" />
<Page/>

就是这样。

开发流程

如果您想为此插件做出贡献以启用开发代码的仓库，请按照以下步骤操作

• 本地分支仓库
• 在您最喜欢的终端中打开仓库
• 导航到包含插件代码的 src 代码 cd /src
• 执行 npm 脚本 nmp run build.wrappers 或 npm run build.wrappers.watch
• 当运行 Vanilla NativeScript 演示应用程序时执行： npm run demo.android 或 npm run demo.ios
• 当运行 Angular NativeScript 演示应用程序时执行： npm run demo.angular.android 或 npm run demo.angular.ios