使用 NativeScript 自定义 iOS 导航栏和状态栏

随着我对 NativeScript 的了解越来越多，我真正投入的首要任务之一是学习如何为 iOS 应用程序自定义导航栏。 NativeScript 在路线图上有一个 Navbar 组件，但就目前而言，它需要一些关于 UINavigationControllers 、 UIViewControllers 等的底层 iOS 实现的知识。但不要害怕！我曾冒过 StackOverflow 和 Objective-C 文档的险恶水域，最终毫发无损地取得了胜利。

在本文中，我将介绍您可能需要对导航栏或状态栏进行的一些更常见的调整。虽然 NativeScript 是一个跨平台框架，但这些调整特别适用于 iOS。但是，我将在此处介绍的大部分项目也可以针对 Android 实现。

在学习自定义 Navigation Bar 的过程中，我 从 Simon NG 在 AppCoda 上的这篇帖子 中得到了很多启发。这是一篇很棒的文章，它从 Objective-C 的角度介绍了可以对 iOS 导航栏和状态栏执行的大部分操作。我真的很喜欢帖子的布局方式，所以我将在这里使用大致相同的格式来讨论 NativeScript 中的 iOS 导航栏/状态栏：

• 显示和隐藏导航栏
• 设置导航栏标题
• 隐藏后退按钮
• 更改导航栏背景颜色
• 更改标题文本颜色
• 更改标题文本样式
• 设置状态栏样式
• 自定义后退按钮的颜色
• 隐藏后退按钮
• 添加新的按钮栏项目

NativeScript 默认导航

NativeScript 将加载的初始页面视为根视图控制器。之后导航到的任何视图都会使用 UINavigationController 推送到导航队列中。这意味着在第一个视图中，您根本看不到导航栏。在每个后续视图中，您会看到它包含一个“< 返回”按钮。

大多数已完成的调整都需要引用 UINavigationController 或当前的 UIViewController。您可以从 frames tns 模块获取对此控制器的引用。

 <Page xmlns="http://www.nativescript.org/tns.xsd" loaded="loaded" >
  <!-- ... -->
</Page>

 <Page xmlns="http://www.nativescript.org/tns.xsd" loaded="loaded" >
  <!-- ... -->
</Page>

显示和隐藏导航

框架模块引用允许在任何时间和任何页面上轻松显示/隐藏导航栏。

 <Page xmlns="http://www.nativescript.org/tns.xsd" loaded="loaded" >
  <!-- ... -->
</Page>

设置导航栏标题

更改标题真的很容易。只需使用公开 title 属性的 page.ios 应用程序对象。

 <Page xmlns="http://www.nativescript.org/tns.xsd" loaded="loaded" >
  <!-- ... -->
</Page>

隐藏后退按钮

有时可能需要隐藏后退按钮。在此处使用的示例中，用户使用 OAuth 登录到 Instagram，然后被重定向到提要页面。默认情况下，该提要页面显示一个后退按钮。

这并不理想，因为用户可能会返回到 OAuth 进程，应用程序将中断。隐藏后退按钮需要获取 UIViewController 的导航项的实例，并调用 setHidesBackButtonAnimated 方法。

 <Page xmlns="http://www.nativescript.org/tns.xsd" loaded="loaded" >
  <!-- ... -->
</Page>

更改导航栏背景颜色

默认的 iOS 颜色是可以的，但是没有一个漂亮的、漂亮的自定义导航栏颜色的应用程序是不完整的。使用 setBarTint 方法更改条形颜色。您可以使用 blueColor() 等系统常量，也可以使用 RGBA 定义自定义常量。我使用方便的程序 Sip ，它对颜色进行采样并自动以这种 RGBA 格式提供它们。

 <Page xmlns="http://www.nativescript.org/tns.xsd" loaded="loaded" >
  <!-- ... -->
</Page>

更改标题文本颜色

导航栏现在是非常时髦的蓝色阴影，但上面的文字仍然是黑色的，这不是很好看或时髦。如果是白色的就更好了。我们可以通过更改导航栏的 titleTextAttributes 来更改它。

 <Page xmlns="http://www.nativescript.org/tns.xsd" loaded="loaded" >
  <!-- ... -->
</Page>

更改标题文本样式

并不是说您 应该这样做 ，但是您也可以更改导航栏中文本的样式。例如，你可以给它一个漂亮的阴影来带回 90 年代后期的感觉。

 <Page xmlns="http://www.nativescript.org/tns.xsd" loaded="loaded" >
  <!-- ... -->
</Page>

设置状态栏样式

状态栏（时间、电池指示器）的默认样式为“深色”。这可以通过使用 UIStatusBarStyle 的有效映射枚举之一来更改。如果您想知道 NativeScript 如何为类映射 iOS 类型和函数，您可以在 ios.d.ts 文件内的 跨平台模块存储库中找到所有这些内容。无需做任何猜测。

 <Page xmlns="http://www.nativescript.org/tns.xsd" loaded="loaded" >
  <!-- ... -->
</Page>

更改后退按钮颜色

如果我们在这个页面上确实有一个后退按钮，它的颜色是错误的：

只需在 navigationBar 上设置色调颜色即可解决此问题。

 <Page xmlns="http://www.nativescript.org/tns.xsd" loaded="loaded" >
  <!-- ... -->
</Page>

将按钮添加到导航栏

可以使用标记将其他按钮添加到导航栏。

 <Page xmlns="http://www.nativescript.org/tns.xsd" loaded="loaded" >
  <!-- ... -->
</Page>

还可以通过构建 UIBarButtonItems 然后将它们添加到 navigationItem 上的 rightBarButtonItems 数组以编程方式添加按钮。

 <Page xmlns="http://www.nativescript.org/tns.xsd" loaded="loaded" >
  <!-- ... -->
</Page>

享受原住民

使用 NativeScript 时我最喜欢的部分之一是这种能力，只需放下并直接开始使用底层原生 API，而无需使用 Objective-C 使用的那种愚蠢的消息传递语法。一旦您掌握了 API 的工作原理以及 NativeScript 如何映射它们 ，您就可以使用 NativeScript 对您的应用程序进行大量自定义。