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

Question

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

如何让键盘不覆盖输入，而是像其他本机应用程序一样出现在它下面？

更新 2

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

Answer 1

我也遇到了同样的问题

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

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

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

不要添加android:windowSoftInputModein application，而是将其添加到 中activity，检查以下内容。

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

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

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

这将修复键盘覆盖问题，但会产生另一个问题，导致状态栏/操作栏在显示键盘时更改高度。要解决，把下面的style.xml在AppThemeBase（要纠正状态栏的颜色）

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

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

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

Answer 2

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

• 键盘在浏览页面视图
• Android 键盘覆盖
• 键盘重叠文本视图

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

模板流程

首先，您需要确保您的页面布局反映如下内容：

ScrollView
  > StackLayout
    > GridLayout
      > SomeElement
    > GridLayout
      > TextField

安卓软输入模式

这与 UI 中的文本字段获得焦点时显示的屏幕键盘有关。确保键盘不会覆盖您的文本字段的一个技巧是确保您windowSoftInputMode在AndroidManifest.xml. 您可以使用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
      }
    });
  }
}