Nativescript vue отклонить / скрыть клавиатуру Android - PullRequest
Новая
       17

Nativescript vue отклонить / скрыть клавиатуру Android

0 голосов
/ 04 июня 2019

Я использую превосходную https://github.com/tjvantoll/nativescript-IQKeyboardManager на iOS, в которой есть кнопка «Готово» (фактически кнопка «Закрыть»).Однако для программной клавиатуры Android такого нет ... Все решения, позволяющие скрыть клавиатуру, предлагают ссылаться на оригинальный элемент, вызвавший срабатывание клавиатуры - непрактичное решение ...

Я нашел этот пост на форуме о том, какотклонить клавиатуру в nativeScript https://discourse.nativescript.org/t/unable-to-hide-keyboard/4129/9

import * as utils from "utils/utils";
import { isIOS, isAndroid } from "platform";
import * as frame from "ui/frame";

// then as a method inside your vue

methods: {
dismissSoftKeybaord() {
  if (isIOS) {
    frame.topmost().nativeView.endEditing(true);
  }
  if (isAndroid) {
    utils.ad.dismissSoftInput();
  }
},

dimissSoftKeyboard должен быть присоединен к внешнему / верхнему элементу - например, странице ... Затем, когда вы щелкаете за пределами поля формы (TextField или TextView), клавиатура будетбыть скрытым / отклоненным. 

<Page @tap="dismissSoftKeybaord()">

Вот код в виде удобного миксина: 

import * as utils from "utils/utils";
import { isIOS, isAndroid } from "platform";
import * as frame from "ui/frame";

export default {
methods: {
    dismissSoftKeybaord() {
        if (isIOS) {
          frame.topmost().nativeView.endEditing(true);
        }
        if (isAndroid) {
          utils.ad.dismissSoftInput();
        }
      },
    }
};

У меня есть небольшая проблема с компоновкой, в которой некоторые элементы оборачивают другие элементыпоэтому мне пришлось применить dismissSofteyboard в нескольких местах - но это работает .... 

<template>
  <Page class="page" statusBarStyle="dark" backgroundSpanUnderStatusBar="true">

    <ActionBar backgroundColor="#253945" color="#ffffff" flat="true" @tap="dismissSoftKeybaord()">
      <StackLayout orientation="horizontal">
        <Label ... />
      </StackLayout>
    </ActionBar>

      <GridLayout rows="*,60" @tap="dismissSoftKeybaord()">
        <ScrollView row="0" @tap="dismissSoftKeybaord()">
          <StackLayout class="logFormWrapper">

            <StackLayout class="input-field" marginBottom="20" >
              <TextField ... />
            </StackLayout>

            <StackLayout class="input-field" marginBottom="20">
              <TextField ...  />
            </StackLayout>
             ...
             ...
          </StackLayout>
        </ScrollView>

        <StackLayout margin="0" row="1" class="footer"></StackLayout>
      </GridLayout>

  </Page>
</template>

Так что я сейчас просто пытаюсь выяснить, как я могу настроить макет, чтобы я ненужно так много dismissSoftKeyboard @ вкладки везде ....

...