@nativescript/iqkeyboardmanager

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

npm install @nativescript/iqkeyboardmanager

使用方法

对于任何需要键盘管理器自动处理的视图，只需确保视图的根节点或顶层节点被包裹在一个 ScrollView 中，这样键盘管理器就可以自动将其正确地平移，例如

• 错误

<GridLayout>
  <TextField></TextField>
<GridLayout>

• 正确

<ScrollView>
  <GridLayout>
    <TextField></TextField>
  <GridLayout>
</ScrollView>

除此之外，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">
  <ScrollView>
    <IQKeyboardManager:PreviousNextView><!-- add this 'wrapper' to enable those previous / next buttons -->
      <StackLayout>
          <TextField hint="Email"/>
          <TextField hint="Password"/>
      </StackLayout>
    </IQKeyboardManager:PreviousNextView>
  </ScrollView>
</Page>

NativeScript /w Angular 使用

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

import { registerElement } from '@nativescript/angular';
import { PreviousNextView } from '@nativescript/iqkeyboardmanager';
registerElement('PreviousNextView', () => PreviousNextView);

然后在视图中使用该元素，如下所示（再次强调，我们使用了 <StackLayout>）

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

NativeScript /w Vue 使用

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

Vue.registerElement('PreviousNextView', () => require('@nativescript/iqkeyboardmanager').PreviousNextView);

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

从上面的 gif 可以看出，当使用 TextField 而不是 TextView 时，占位符/提示在键盘上的辅助栏中显示。

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

NativeScript /w XML 使用

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

NativeScript /w Angular 使用

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

import { registerElement } from '@nativescript/angular';
import { TextViewWithHint } from '@nativescript/iqkeyboardmanager';
registerElement('TextViewWithHint', () => 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/@nativescript/types/index.d.ts" />
/// <reference path="./node_modules/@nativescript/iqkeyboardmanager/index.d.ts" />

注意：你可能还需要运行 npm install --save-dev @nativescript/types 来为原生 iOS 开发引入 NativeScript 的 TypeScript 定义。

接下来，使用以下代码初始化一个 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 文件。

许可

Apache 许可协议版本 2.0