javascript-在NativeScript应用程序中与TextField交互时停止键盘覆盖

在用户可以输入输入的NativeScript应用程序视图中使用时,本机应用程序Keyboard Input会覆盖TextField组件.虽然这不会阻止用户输入文本,但会打乱UX流,并从UI角度看很糟糕.

如何使键盘不覆盖输入,而是像其他本机应用程序一样显示在其下方？

更新2

现在它不再覆盖了,我注意到当我离开该应用程序以切换到另一个应用程序或挂起NativeScript应用程序时,当我回到该应用程序时,问题再次出现.我该怎么做才能保持原始行为？

解决方法:

在讨论了一些其他讨论和资源之后：

> Keyboard in going over the page view
> Android keyboard overlay
> Keyboard overlapping textview

这些资源有一些收获,我将在下面进行回顾.

模板流程

首先,您需要确保页面布局与以下内容类似：

ScrollView
  > StackLayout
    > GridLayout
      > SomeElement
    > GridLayout
      > TextField

Android软输入模式

这与屏幕键盘有关,该键盘在UI中的文本字段获得焦点时显示.确保键盘不覆盖文本框的一种技巧是确保在AndroidManifest.xml中设置了属性windowSoftInputMode.您可以使用adjustResize或adjustPan.我不确定这些差异,但是有些用户报告说这两种方法都起作用,因此您可能需要尝试哪种方法适合您的情况.您可以阅读有关这两个标志here的更多信息.

<?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设置的标志.要解决此问题,您需要在视图本身的控制器中进行一些调整,以监视这些事件在应用程序的生命周期中发生,然后再次追溯启用这些标志.

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

标签：nativescript,angular,typescript,nativescript-angular,javascript
来源： https://codeday.me/bug/20191108/2007217.html