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

【问题标题】：Stop keyboard overlay when interacting with TextField in a NativeScript application在 NativeScript 应用程序中与 TextField 交互时停止键盘覆盖
【发布时间】：2018-12-30 19:50:22
【问题描述】：

在使用用户可以输入输入的 NativeScript 应用程序视图时，本机应用程序键盘输入会覆盖TextField 组件。虽然这不会阻止用户输入文本，但它会破坏 UX 流程并且从 UI 角度看起来很糟糕。

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

更新 2

现在它不再重叠，我注意到当我离开应用程序以切换到另一个应用程序或暂停 NativeScript 应用程序时，当我回到它时问题再次出现。我可以做些什么来保持原来的行为？

【问题讨论】：

标签： javascript angular typescript nativescript nativescript-angular

【解决方案1】：

我也有同样的问题，

TNS Version: 6.3.0
Android Version: 9
Using RadSideDrawer with nativescript angular

添加以下内容对我不起作用

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

不要在application 中添加android:windowSoftInputMode，而是在activity 中添加它，检查以下内容。

<activity
    ...
    android:windowSoftInputMode="adjustResize">

还需要更新style.xml，在LaunchScreenThemeBase中添加以下内容

    <item name="android:fitsSystemWindows">true</item>

这将解决键盘覆盖问题，但会产生另一个问题，导致状态栏/操作栏在显示键盘时改变高度。要解决这个问题，请将以下内容放入 AppThemeBase 中的style.xml 中（以更正状态栏的颜色）

    <item name="android:windowBackground">@color/ns_primary</item>

在_app-common.scss中（去掉多余的空间）

    .action-bar {
      margin-top:-22;  
    }

【讨论】：

【解决方案2】：

在偶然发现一些其他讨论和资源之后：

我将在下面回顾这些资源的一些要点。

模板流程

首先，您需要确保您的页面布局如下所示：

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 中有一些东西被重置，这会导致当应用程序是 suspended 和 resumed 时，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
      }
    });
  }
}

【讨论】：

我还想指出，经过本地测试后；我确认我只需要添加应用程序生命周期事件处理程序来手动重新启用此 IF 我正在暂停应用程序并在同一视图中恢复应用程序。如果我回到应用程序并导航回视图，则会出现此问题。
默认软输入模式未指定。根据Android API reference > 系统将尝试根据窗口的内容选择一个或另一个，这解释了明确设置它的必要性。但是，我不否认有 NativeScript 的怪癖。此外，adjustResize 现在是 deprecated。

【解决方案3】：

我正在使用 {N} 6.5.0，并通过此设置使其适用于 Android。

这个例子结合了PreviousNextView，解决了iOS上的问题。

html

<PreviousNextView>
  <DockLayout stretchLastChild="true">
    <StackLayout dock="bottom">      <-- this is a bottom bar with a TextField
    <StackLayout dock="top">
  </DockLayout>
</PreviousNextView>

AndroidManifest.xml

<activity
    ...
    android:windowSoftInputMode="adjustPan">

【讨论】：