@nativescript/keyboard-toolbar

npm install @nativescript/keyboard-toolbar

感谢 Eddy Verbruggen 所做的所有出色工作！

iOS 和 Android 运行包含的 演示 - 在 YouTube 上的帧率更好！（YouTube 视频链接）

键盘是什么？！

很高兴你问了 😅！

• ⌨️ 移动键盘充其量是一种妥协。让我们通过在其上方附加一个工具栏来使其更容易使用。
• 🥅 设计目标 = 声明任何 NativeScript 布局并将其粘附在软键盘上方。
• 🏒 让工具栏无论形状或形式如何都能“粘附”到键盘上。
• 🙅‍♀️ 没有第三方依赖项；仅使用来自 @nativescript/core（你的应用已经拥有的）的内容。
• ♾ 允许在一个页面上使用多个工具栏设计。

一般使用说明

该插件通过获取你声明的工具栏布局并将其移出屏幕来工作。

然后，每当相关的 TextField 或 TextView 获得焦点时，该插件将工具栏动画到键盘顶部，并保持在那里，直到字段失去焦点。

为了正确地执行此操作，你需要获取你目前拥有的任何布局并将其包裹在一个 GridLayout 中，如下面的示例所示。当其 row 和 col 属性相等（或省略）时，GridLayout 允许堆叠多个子布局。

所以如果你的布局结构目前是这样的

<ActionBar/>
<StackLayout/>

改为这样

<ActionBar/>
<GridLayout>
    <StackLayout/>
    <Toolbar/>
</GridLayout>

还不错，对吧？这样就会让 Toolbar 堆叠在您已经拥有的 StackLayout 之上。

请注意，插件可以为您执行此操作，或采取其他完全不同的方法，但许多小时的尝试使我确信这是最好的解决方案。

与 Core 一起使用

注意以下示例中的注释。

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:kt="@nativescript/keyboard-toolbar">

    <!-- This GridLayout wrapper is required; it wraps the visible layout and the Toolbar layout(s) -->
    <GridLayout>

        <StackLayout>
            <Label text="Some text"/>
            <!-- Add an 'id' property that we can reference below -->
            <TextField id="priceTextField" hint="Enter the price" keyboardType="number"/>
        </StackLayout>

        <!-- The 'forId' and 'height' properties are mandatory -->
        <kt:Toolbar forId="priceTextField" height="44">
            <GridLayout columns="*, *, *" class="toolbar">
                <Label col="0" text="👍" tap="{{ appendToTextView }}"/>
                <Label col="1" text="👎" tap="{{ appendToTextView }}"/>
                <Label col="2" text="😄" tap="{{ appendToTextView }}"/>
            </GridLayout>
        </kt:Toolbar>

    </GridLayout>
</Page>

与 Angular 一起使用

在特定模块中注册插件，或在应用程序模块中全局注册

import { registerElement } from "@nativescript/angular";
import { Toolbar } from 'nativescript-keyboard-toolbar';
registerElement("KeyboardToolbar", () => Toolbar);

在这个示例中，我们向 ActionBar 添加了一个 TextField。请注意，我们仍然需要将页面的其余部分包裹在一个 GridLayout 中

<ActionBar>
  <TextField #textField1 id="tf1"></TextField>
</ActionBar>

<!-- Our Toolbar wrapper - no need for 'columns' / 'rows' properties because we want the children to stack -->
<GridLayout>

  <!-- Add whatever visible layout you need here -->
  <ListView [items]="items">
    <ng-template let-item="item">
      <Label [nsRouterLink]="['/item', item.id]" [text]="item.name" class="list-group-item"></Label>
    </ng-template>
  </ListView>

  <!-- Use 'KeyboardToolbar' because that's what we registered in our module (see above).
   The 'forId' and 'height' properties are mandatory -->
  <KeyboardToolbar forId="tf1" height="44">
    <GridLayout columns="*, *, *, auto" class="toolbar">
      <Label col="0" text="👍" (tap)="appendToTextField(textField1, '👍')"></Label>
      <Label col="1" text="👎" (tap)="appendToTextField(textField1, '👎')"></Label>
      <Label col="2" text="😄" (tap)="appendToTextField(textField1, '😄')"></Label>
      <Label col="3" text="Close️" (tap)="closeKeyboard(textField1)"></Label>
    </GridLayout>
  </KeyboardToolbar>
</GridLayout>

与 Vue 一起使用

在 app.js 中注册插件（或根据您的应用程序设置：app.ts、main.js 等）

import Vue from "nativescript-vue";
Vue.registerElement('KeyboardToolbar', () => require('nativescript-keyboard-toolbar').Toolbar);

<template>
  <Page class="page">
    <ActionBar class="action-bar">
      <Label class="action-bar-title" text="Home"></Label>
    </ActionBar>

    <!-- Our Toolbar wrapper - no need for 'columns' / 'rows' properties because we want the children to stack -->
    <GridLayout>

      <StackLayout>
        <TextView id="tv2" text="Say it with emoji!"/>
      </StackLayout>

      <!-- Use 'KeyboardToolbar' because that's what we registered in our module (see above).
         The 'forId' and 'height' properties are mandatory -->
      <KeyboardToolbar forId="tv2" height="44">
        <GridLayout columns="*, *, *" class="toolbar">
          <Label col="0" text="👍" @tap="appendToTextView2"/>
          <Label col="1" text="👎" @tap="appendToTextView2"/>
          <Label col="2" text="😄" @tap="appendToTextView2"/>
        </GridLayout>
      </KeyboardToolbar>

    </GridLayout>
  </Page>
</template>

<script>
  import { Frame } from "@nativescript/core";

  export default {
    methods: {
      appendToTextView2(args) {
        const textView = Frame.topmost().currentPage.getViewById("tv2");
        textView.text += args.object.text;
      }
    }
  }
</script>

IQKeyboardManager 怎么样？

如果您已安装 IQKeyboardManager 以在 iOS 上获得更好的键盘行为，则此插件将检测到它并将自定义工具栏的高度添加到 IQKeyboardManager 应用的滚动偏移量。您可以在 NativeScript Core 演示应用程序 中看到此操作。

在这种情况下，您可能想要抑制 IQKeyboardManager 自己的工具栏（以避免双工具栏），如以下所示。

未来工作

• 支持方向更改。
• 在 iOS 上，当在键盘外轻点时关闭键盘（可配置）。目前，您可以添加并配置 IQKeyboardManager，如上述所述。
• 如果键盘覆盖了文本字段，则自动滚动视图（在 iOS 上您可以使用 IQKeyboardManager 执行此操作）。
• Android上对模态对话框的支持（目前无法在模态对话框中使用工具栏，因为工具栏在模态对话框后面）

致谢

• 所有功劳归功于 Eddy Verbruggen

许可证

Apache许可证第2版