@nativescript/iqkeyboardmanager

内容

介绍
安装
使用 @nativescript/iqkeyboardmanager
原生文档
维护者
许可证

介绍

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

Example of using the IQKeyBoardManager NativeScript plugin on an iOS device

安装

要安装该插件，请从项目根目录运行以下命令

cli

npm install @nativescript/iqkeyboardmanager

使用 @nativescript/iqkeyboardmanager

以下部分介绍如何在 NativeScript 支持的不同版本中使用 @nativescript/iqkeyboardmanager 插件。

注意

使相关的文本字段成为 IQKeyboardManager 的兄弟节点，以便自动

将 previous(<) 和 next(>) 按钮添加到附件栏。用户然后可以使用这些按钮来回跳转。

核心

使用您可以在其中访问 PreviousNextView 的前缀 (例如 IQKeyboardManager) 在 Page 的 xmlns 属性下注册插件命名空间。

xml

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

使用前缀访问 PreviousNextView。

xml

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

以下代码是上面两步的结果

xml

<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>

Angular

在您要使用此功能的 .modules.ts 文件 (或用于全局访问的 app.module.ts) 中注册 PreviousNextView 元素。

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

将 PreviousNextView 添加到标记中，如下所示

html

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

Vue

通过将以下代码添加到 app.ts 文件中来注册 PreviousNextView。

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

在标记中使用 PreviousNextView。

xml

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

Svelte

通过将以下代码添加到 app.ts 文件中来注册 PreviousNextView。

registerNativeViewElement(
  'previousNextView',
  () => require('@nativescript/iqkeyboardmanager').PreviousNextView
)

将 previousNextView 添加到标记中。

xml

<previousNextView><!-- add this 'wrapper' to enable those previous / next buttons -->
<stackLayout>
	<textField hint="Email"/>
	<textField hint="Password"/>
</stackLayout>
</previousNextView>

有关演示应用，请访问 NativeScript Svelte：IQ 键盘管理器。

在 TextView 附件栏中添加提示文本

默认情况下，当 TextField 获得焦点时，键盘管理器会在键盘上方的附件栏中显示该字段的提示标签。

但是，对于 TextView，请使用此插件提供的 TextViewWithHint 组件将提示标签添加到附件栏。

核心

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>

Angular

在您要使用此功能的 .modules.ts 文件 (或 app.module.ts) 中注册 TextViewWithHint 元素

typescript

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

然后在标记中，像这样使用该元素

html

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

Vue

注册组件。

javascript

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

Svelte

注册组件。

javascript

.registerNativeViewElement('textViewWithHint', () => require('@nativescript/iqkeyboardmanager').TextViewWithHint);

React

interface PreviewNextViewAttributes extends ViewAttributes {}
interface TextViewWithHintAttributes extends ViewAttributes {
  text: string
  hint?: string
}
declare global {
  module JSX {
    interface IntrinsicElements {
      /**
       * If determining the GradientAttributes is too much work,
       * you could substitute it for `any` type!
       */
      previousNextView: NativeScriptProps<
        PreviewNextViewAttributes,
        PreviousNextView
      >
      textViewWithHint: NativeScriptProps<
        TextViewWithHintAttributes,
        TextViewWithHint
      >
    }
  }
}
registerElement(
  'previousNextView',
  () => require('@nativescript/iqkeyboardmanager').PreviousNextView
)
registerElement(
  'textViewWithHint',
  () => require('@nativescript/iqkeyboardmanager').TextViewWithHint
)

在标记中使用 TextViewWithHint

xml

<previousNextView>
	<stackLayout>
		<textField hint="Email" />
		<textField hint="Password" />
		<stackLayout>
			<textViewWithHint text={textViewWithHintText} hint="Working textView hint 🤪" />
		</stackLayout>
	</stackLayout>
</previousNextView>

演示应用

以下是不同 JS 版本中插件演示应用的链接。

调整外观和行为

要调整 PreviousNextView 的外观和行为，请按照以下步骤操作

将以下路径添加到应用的 references.d.ts 文件中。

xml

/// <reference path="./node_modules/@nativescript/iqkeyboardmanager/index.d.ts" />

初始化 IQKeyboardManager 的实例，如下所示。

typescript

const iqKeyboard = IQKeyboardManager.sharedManager()

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

typescript

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

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

iOS 具有一个功能，即文本字段的 QuickType 搜索建议栏可以为发送到您设备的多因素身份验证建议一次性代码值。

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

123456 是您的 App Name 代码。
123456 是您的 App Name 登录代码。
123456 是您的 App Name 验证代码。

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

typescript

declare var UITextContentTypeOneTimeCode

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

typescript

// 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 更新时，您应该为该插件生成新的类型定义以反映这些更改。

为此，请执行以下命令。

bash

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 版

@nativescript/iqkeyboardmanager ​

内容 ​

介绍 ​

安装 ​

使用 @nativescript/iqkeyboardmanager ​

核心 ​

Angular ​

Vue ​

Svelte ​

在 TextView 附件栏中添加提示文本 ​

核心 ​

Angular ​

Vue ​

Svelte ​

React ​

演示应用 ​

调整外观和行为 ​

多因素一次性代码自动填充 ​

原生文档 ​

维护者 ​

许可证 ​

贡献者

@nativescript/iqkeyboardmanager

内容

介绍

安装

使用 @nativescript/iqkeyboardmanager

核心

Angular

Vue

Svelte

在 TextView 附件栏中添加提示文本

核心

Angular

Vue

Svelte

React

演示应用

调整外观和行为

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

原生文档

维护者

许可证