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

在此示例中，我们将 TextField 添加到 ActionBar 中。请注意，我们仍然需要将页面的其余部分包裹在一个 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 演示应用程序

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

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 演示应用程序

在 演示-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 的看法？

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

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

未来工作

• 支持方向更改。
• 在iOS上，点击键盘外的区域关闭键盘（可配置）。目前您可以按照上述说明添加和配置IQKeyboardManager。
• 如果键盘覆盖文本字段，则自动滚动视图（在iOS上，您可以使用IQKeyboardManager实现此功能）。
• Android上的模态支持（目前因为工具栏位于模态框后面，所以不能在模态中使用工具栏）