在您的 NativeScript 应用中自定义 iOS 键盘

在 iOS 与 Android 开发者之争中，我长期以来都是 iOS 阵营的一员。我自豪地像个疯子一样给我的苹果鼠标充电，不带讽刺地使用“勇气”一词，并在公共场合佩戴最荒谬的转接头。

你不是选择转接头生活，而是转接头生活选择了你。

我之所以这样做，是因为 iOS 提供的软件（在我看来）比 Android 略好，而且作为一名软件开发人员，我被训练成要对最微不足道的细节采取生死攸关的态度。这就是我们的定义。

但 iOS 中有一个部分我甚至无法辩护，那就是它古怪的键盘行为。这是因为 iOS，一个拥有超过 200 万个已部署应用程序的平台，在为开发者提供体面的默认键盘方面令人惊讶地糟糕。

如果您使用 NativeScript 应用程序超过几个小时，您可能至少遇到过下面 GIF 中的情况。（注意我如何将焦点移动到第二个表单字段，然后我无法看到我正在输入的内容，因为键盘覆盖了输入。）

iOS，这个允许您使用面部进行身份验证的操作系统，却无法让用户看到他们正在输入的内容。

注意：对于你们这些 Android 爱好者，是的，Android没有这个问题。这一点你们赢了，但如果你在与我争论时提起它，就要准备好为这个烂摊子负责。

幸运的是，有一个库您可以快速安装以提供帮助。

IQKeyboardManager

iOSIQKeyboardManager 库是一个即插即用解决方案，它很可能会开箱即用地解决您所有的 iOS 键盘问题。要尝试它，请使用tns plugin add命令安装该库的 NativeScript 包装器。

tns plugin add nativescript-iqkeyboardmanager

而且……这就是您需要做的全部，因为 IQKeyboardManager 无需您编写任何代码即可工作。例如，如果我只是重新运行我之前显示的同一个应用程序，键盘不仅不再阻止我的输入，而且我还免费获得了一些有用的键盘控件和标签。

IQKeyboardManager 以 iOS 应该默认的方式处理键盘。

提示：您可以在NativeScript Playground 上自己尝试此示例。

自定义 IQKeyboardManager

虽然 IQKeyboardManager 默认情况下解决了您在使用 iOS 键盘时遇到的大多数常见问题，但您可能还希望尝试一些其他自定义选项。让我们看看它们是如何工作的。

对相关的文本字段进行分组

请注意，在上面的 GIF 中，IQKeyboardManager 如何提供有用的箭头按钮来在文本字段之间导航。只有当您的文本字段是同级元素时，即您的标记看起来像这样时，IQKeyboardManager 才能提供这些箭头。

<StackLayout>
  <TextField hint="Email"></TextField>
  <TextField hint="Password"></TextField>
</StackLayout>

问题在于，在现实世界的表单中，您通常需要额外的标记来使表单看起来更好。在这些情况下，您需要使用 IQKeyboardManager 插件的<PreviousNextView>元素。元素的使用取决于您是使用 NativeScript Core 还是使用 Angular 的 NativeScript。

在 NativeScript Core 应用程序中，您需要将 IQKeyboardManager 作为 XML 命名空间引入，看起来有点像这样。

<Page xmlns:IQKeyboardManager="nativescript-iqkeyboardmanager">
  ...

  <!-- This is the wrapper that enables the previous/next buttons -->
  <IQKeyboardManager:PreviousNextView>

    <!-- This single StackLayout child of the PreviousNextView is also necessary. -->
    <StackLayout>

      <!-- Your textfields go here. -->
      <StackLayout>
        <TextField hint="Email"/>
      </StackLayout>
      <StackLayout>
        <TextField hint="Password"/>
      </StackLayout>

    </StackLayout>

  </IQKeyboardManager:PreviousNextView>
  ...
</Page>

如果您使用的是 Angular，则需要使用以下两行代码在您的 TypeScript 组件中注册<PreviousNextView>元素。

import { registerElement } from "nativescript-angular";
registerElement("PreviousNextView", () => require("nativescript-iqkeyboardmanager").PreviousNextView);

然后您直接在标记中使用该元素。

<PreviousNextView>

  <StackLayout>

    <!-- Your textfields go here. -->
    <StackLayout>
      <TextField hint="Email"/>
    </StackLayout>
    <StackLayout>
      <TextField hint="Password"/>
    </StackLayout>

  </StackLayout>

</PreviousNextView>

注意：也可以在 Vue 中使用该插件。查看IQKeyboardManager 插件的文档以获取所需的语法。

调整外观和行为

虽然 IQKeyboardManager 默认情况下确实提供了良好的体验，但它还为您提供了许多自定义选项以满足您的应用程序需求。以下是您可以执行的操作的快速概述（并参考插件的文档以获取所需的精确语法）。

使用深色键盘

iOS 提供了浅色和深色键盘，IQKeyboardManager 插件可以轻松地在两者之间切换。

当用户点击文本字段外部时关闭键盘

默认情况下，当用户点击控件外部时，iOS *不会*隐藏键盘。如果您想启用此行为，即当用户点击文本字段外部时关闭键盘，该插件为此提供了一个选项。

总结

总的来说，IQKeyboardManager 插件提供了应该成为 iOS 本身一部分的功能。（如果您知道操作系统应该允许您在看不到的文本字段中输入内容的充分理由，请在评论中告诉我。）

幸运的是，NativeScript 使包含 IQKeyboardManager 等原生库变得很容易，因此在您的 NativeScript 应用程序中包含此功能就像快速安装一样简单。

因此，如果您在 iOS 应用程序中遇到键盘问题，请尝试使用该插件。如果您想查看插件的实际效果，请参考本文的示例代码。