NativeScript 键盘工具栏

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

键盘是什么？

很高兴你问了 😅！

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

安装

tns plugin add nativescript-keyboard-toolbar

通用使用说明

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

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

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

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

<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 上的模态支持（目前由于工具栏位于模态框之后，因此无法在模态框中使用工具栏）