8.7 发布—WinterCG 合规性 第 1 部分
了解更多

在 GitHub 上查看

@nativescript/keyboard-toolbar ​

javascript
npm install @nativescript/keyboard-toolbar

感谢 Eddy Verbruggen 为所有优秀的工作！

iOS 和 Android 运行包含的 演示 - 更佳的帧速率 在 YouTube 上！

键盘怎么了？ ​

很高兴你问！😅

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

一般使用说明 ​

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

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

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

所以，如果您的布局结构当前是

xml
<ActionBar/>
<StackLayout/>

将其更改为

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

还不错吧？这将使 Toolbar 堆叠在您已经拥有的 StackLayout 之上。

请注意，该插件可以为您完成此操作，或者采用完全不同的方法，但是经过数小时的调整，我确信这是最佳解决方案。

与 Core 一起使用 ​

注意以下示例中的注释。

xml
<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 一起使用 ​

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

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

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

html
<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 等）

typescript
import Vue from 'nativescript-vue'
Vue.registerElement(
  'KeyboardToolbar',
  () => require('nativescript-keyboard-toolbar').Toolbar
)
vue
<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 上的模态支持（当前您无法在模态中使用工具栏，因为工具栏位于模态后面）

致谢 ​

许可证 ​

Apache 许可证 2.0 版

下一个
本地通知