NativeScript IQKeyboardManager 插件

NativeScript 封装了流行的 IQKeyboardManager iOS 框架，它为防止 iOS 键盘覆盖 UITextView 控件提供了一个优雅的解决方案。

安装

$ tns plugin add nativescript-iqkeyboardmanager

使用

就是这样！IQKeyboardManager 默认会在应用启动时处理所有初始化。

高级使用

分组相关的文本字段（上一个/下一个按钮）

如果您的 UI 布局中有兄弟文本字段，那么 IQKeyboardManager 能够自动将上一个/下一个按钮添加到工具栏，用户可以使用这些按钮来回跳转。请参见上面的视频中的那些 < 和 > 按钮。

如果这些字段不是直接的兄弟，那么在插件版本 1.3.0 之前，您无法强制使上一个/下一个按钮显示。但是，现在您可以

NativeScript /w XML 使用

请注意以下示例中，两个 <TextField> 控件不是兄弟（它们都有父 <StackLayout> 容器）。正因为如此，IQKeyboardManager 默认不会提供优化的键盘。

但是，如果您用此插件提供的 <PreviousNextView> 控件包围这些控件，如下例所示，您将获得预期的优化键盘。

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:IQKeyboardManager="nativescript-iqkeyboardmanager">
  <StackLayout>
    <IQKeyboardManager:PreviousNextView><!-- add this 'wrapper' to enable those previous / next buttons -->
      <StackLayout>
        <StackLayout>
          <TextField hint="Email"/>
        </StackLayout>
        <StackLayout>
          <TextField hint="Password"/>
        </StackLayout>
      </StackLayout>
    </IQKeyboardManager:PreviousNextView>
  </Stacklayout>
</Page>

NativeScript /w Angular 使用

在您想要使用此功能的 .modules.ts 文件中（或 app.module.ts），注册 PreviousNextView 元素

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

然后在视图中，像这样使用该元素（再次，我们对 <StackLayout> 进行了疯狂的操作）

<StackLayout>
  <PreviousNextView><!-- add this 'wrapper' to enable those previous / next buttons -->
    <StackLayout>
      <StackLayout>
        <TextField hint="Email"></TextField>
      </StackLayout>
      <StackLayout>
        <TextField hint="Password"></TextField>
      </StackLayout>
    </StackLayout>
  </PreviousNextView>
</Stacklayout>

NativeScript /w Vue 使用

Vue 使用与 Angular 使用非常相似，唯一的区别在于元素注册的方式。打开您应用的主入口文件，并添加以下内容

Vue.registerElement("PreviousNextView", () => require("nativescript-iqkeyboardmanager"). PreviousNextView)

在 TextView 的工具栏上添加占位符/提示

查看上面的 gif，您可能注意到当聚焦电子邮件地址和密码字段时，那些 TextField 的占位符/提示显示在键盘上面的工具栏中。

但是，当您使用 TextView 而不是 TextField 时，由于 iOS 的限制，占位符不会显示。您可以通过使用此插件提供的 TextViewWithHint 来解决这个问题。所以每次您想使用带有占位符的 TextView 时，请使用 TextViewWithHint。

NativeScript /w XML 使用

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:IQKeyboardManager="nativescript-iqkeyboardmanager">
  <StackLayout>
    <TextView hint="Not working TextView hint"/>
    <IQKeyboardManager:TextViewWithHint hint="Working TextView hint 🤪"/>
  </StackLayout>
</Page>

NativeScript /w Angular 使用

在您想要使用此功能的 .modules.ts 文件中（或 app.module.ts），注册 TextViewWithHint 元素

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

然后在视图中，像这样使用该元素

<StackLayout>
  <TextView hint="Not working TextView hint"></TextView>
  <TextViewWithHint hint="Working TextView hint 🤪"></TextViewWithHint>
</Stacklayout>

NativeScript /w Vue 使用

Vue 使用与 Angular 使用非常相似，唯一的区别在于元素注册的方式。打开您应用的主入口文件，并添加以下内容

Vue.registerElement("TextViewWithHint", () => require("nativescript-iqkeyboardmanager").TextViewWithHint)

调整外观和行为

首先，将以下两个路径添加到您的应用 references.d.ts 文件中。（请参阅此仓库的演示应用以获取特定示例。）

/// <reference path="./node_modules/tns-platform-declarations/ios/ios.d.ts" />
/// <reference path="./node_modules/nativescript-iqkeyboardmanager/index.d.ts" />

注意：您可能还需要运行 npm install --save-dev tns-platform-declarations 以获取 NativeScript 的 TypeScript 定义，以便进行原生 iOS 开发。

接下来，使用以下行代码初始化 IQKeyboardManager 实例。

const iqKeyboard = IQKeyboardManager.sharedManager();

您现在可以使用完整的IQKeyboardManager API。例如，您可以使用以下代码切换到暗色键盘。

const iqKeyboard = IQKeyboardManager.sharedManager();
iqKeyboard.overrideKeyboardAppearance = true;
iqKeyboard.keyboardAppearance = UIKeyboardAppearance.Dark;

要了解更多可能的示例，请运行下面的示例应用（如gif所示）并查看应用的main-view-model.ts文件。

多因素一次性密码自动填充

以下内容并非IQKeyboardManager的特定功能，但您访问这里是因为您希望为您的NativeScript应用提供最佳键盘体验，以下信息可能对您有所帮助。

iOS有一个功能，即文本字段的QuickType搜索建议栏可以建议一次性密码值，这些密码已通过短信发送到您的设备。

如果该字段被特别识别为一次性密码字段，则收到后约3分钟内会出现建议，用户只需轻触建议即可填写值——无需短期记忆或复制粘贴手势。消息格式示例包括

• 123456是您的应用名称代码。
• 123456是您的应用名称登录代码。
• 123456是您的应用名称验证代码。

要在自己的应用中实现此功能，首先在组件导入附近声明UITextContentTypeOneTimeCode

declare var UITextContentTypeOneTimeCode;

然后，设置字段的ios.textContentType属性

// This code assumes this.page exists as a reference to the current Page.
const mfaCodeField: TextField = this.page.getViewById(oneTimeCodeFieldName);
if (mfaCodeField !== null && mfaCodeField.ios) {
  mfaCodeField.ios.textContentType = UITextContentTypeOneTimeCode;
}

您可能还想使用其他textContentType值。您可以在这篇文章中了解更多关于该属性的信息。

文档

有关IQKeyboardManager如何工作的更多详细信息，包括更详细的API文档，请参阅库的CocoaPod页面。

维护者

对于此插件源代码的维护者：当IQKeyboardManager Podfile更新时，您应该为该插件生成新的类型定义，以反映这些更改。

要执行这些操作，请运行以下命令。

cd demo
TNS_DEBUG_METADATA_PATH="$(pwd)/metadata" tns build ios
TNS_TYPESCRIPT_DECLARATIONS_PATH="$(pwd)/typings" tns build ios

接下来，在demo/typings文件夹中找到IQKeyboardManager生成的类型定义文件，并覆盖此存储库根目录中的IQKeyboardManager.d.ts文件。