Остановить наложение клавиатуры при взаимодействии с TextField в приложении NativeScript - PullRequest
Новая
       7

Остановить наложение клавиатуры при взаимодействии с TextField в приложении NativeScript

0 голосов
/ 30 декабря 2018

При работе с представлением приложения NativeScript, где пользователь может вводить данные, ввод с клавиатуры собственного приложения накладывается на компонент TextField.Хотя это не мешает пользователю вводить текст, это нарушает поток UX и выглядит плохо с точки зрения пользовательского интерфейса.

Как заставить клавиатуру не перекрывать ввод, а вместо этого появляться под ней, как другиемогут ли работать нативные приложения?

Обновление 2

Теперь, когда оно больше не перекрывается, я заметил, что когда я покидаю приложение, чтобы переключиться на другое или приостановить приложение NativeScript, когда я возвращаюсь к нему, проблема появляется снова.Что я могу сделать, чтобы сохранить исходное поведение?

1 Ответ

0 голосов
/ 30 декабря 2018

После спотыкания о других дискуссиях и ресурсах:

Из этих ресурсов было сделано несколько выводов, которые я рассмотрю ниже.

Поток шаблонов

Во-первых, вам нужно убедиться, что макет вашей страницы отражает что-то вроде следующего: 

ScrollView
  > StackLayout
    > GridLayout
      > SomeElement
    > GridLayout
      > TextField

Режим программного ввода Android

Это относится к экранной клавиатуре, которая отображается, когдатекстовое поле в пользовательском интерфейсе получает фокус.Один из способов убедиться, что клавиатура не перекрывает текстовое поле, - убедиться, что в вашем AndroidManifest.xml установлено свойство windowSoftInputMode.Вы можете использовать adjustResize или adjustPan.Я не совсем уверен в различиях, но некоторые пользователи сообщали о том, что они работают, или оба работают, поэтому вам, возможно, придется поэкспериментировать с тем, что подходит для вашего случая.Вы можете прочитать больше об этих двух флагах здесь . 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="__PACKAGE__"
  android:versionCode="10000"
  android:versionName="1.0">

  ...

  <application
    ...
    android:windowSoftInputMode="stateHidden | adjustPan">

Обновление 2

Я полагаю, что в NativeScript происходит сброс, который вызывает флагустанавливается android:windowSoftInputMode для сброса, когда приложение suspended и resumed.Чтобы обойти это, вам нужно внести некоторые изменения в контроллере самого представления, чтобы смотреть , чтобы эти события происходили в жизненном цикле вашего приложения, а затем задним числом снова включить флаги.

some-view.component.ts (TypeScript) 

import { Component, OnInit } from '@angular/core';
import * as app from "application";
import {
  resumeEvent,
  suspendEvent,
  ApplicationEventData,
  on as applicationOn,
  run as applicationRun } from "tns-core-modules/application";

declare var android: any; // <- important! avoids namespace issues

@Component({
  moduleId: module.id,
  selector: 'some-view',
  templateUrl: './some-view.component.html',
  styleUrls: ['./some-view.component.css']
})
export class SomeViewComponent implements OnInit {

  constructor() {
    applicationOn(suspendEvent, (args: ApplicationEventData) => {
      // args.android is an android activity
      if (args.android) {
        console.log("SUSPEND Activity: " + args.android);
      }
    });

    applicationOn(resumeEvent, (args: ApplicationEventData) => {
      if (args.android) {
        console.log("RESUME Activity: " + args.android);
        let window = app.android.startActivity.getWindow();
        window.setSoftInputMode(
          android.view.WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN
        );
        // This can be SOFT_INPUT_ADJUST_PAN
        // Or SOFT_INPUT_ADJUST_RESIZE
      }
    });
  }
}
...