NativeScript 键盘工具栏

iOS 和 Android 运行包含的演示 - 在 YouTube 上的帧率更好！观看视频！

键盘是啥？

很高兴你问了 😅！

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

安装

tns plugin add nativescript-keyboard-toolbar

一般使用说明

该插件通过捕获您声明的工具栏布局并将其移动到屏幕外来工作。

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

为此行为正常，您需要获取任何现有布局并将其包裹在以下示例中所示的 GridLayout 中。当它们的 row 和 col 属性相等（或省略）时，GridLayout 允许将多个子布局堆叠在彼此之上。

因此，如果您的布局结构目前是这样

<ActionBar/>
<StackLayout/>

改为这样

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

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

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

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

核心演示应用程序

检查演示文件夹中的源代码，或在自己的设备上运行它

git clone https://github.com/EddyVerbruggen/nativescript-keyboard-toolbar
cd nativescript-keyboard-toolbar/src
npm i
npm run demo.ios # or .android

与 NativeScript-Angular 一起使用

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

import { registerElement } from "nativescript-angular";
registerElement("KeyboardToolbar", () => require("nativescript-keyboard-toolbar").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>

Angular 演示应用程序

检查演示文件夹中的源代码，或在自己的设备上运行它

git clone https://github.com/EddyVerbruggen/nativescript-keyboard-toolbar
cd nativescript-keyboard-toolbar/src
npm i
npm run demo-ng.ios # or .android

与 NativeScript-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 { topmost } from "tns-core-modules/ui/frame";

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

Vue 演示应用程序

检查演示文件夹中的源代码，或在自己的设备上运行它

git clone https://github.com/EddyVerbruggen/nativescript-keyboard-toolbar
cd nativescript-keyboard-toolbar/src
npm i
npm run demo-vue.ios # or .android

关于 IQKeyboardManager 呢？

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

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

未来工作

支持方向更改。
在 iOS 上，当在键盘外点击时关闭键盘（可配置）。目前，您可以添加和配置 IQKeyboardManager，如上所述。
如果键盘覆盖文本字段，则自动滚动视图（在iOS上，您可以使用IQKeyboardManager实现该功能）。
Android上的模态支持（目前无法在模态中使用工具栏，因为工具栏在模态之后）