在 NativeScript 应用中与 TextField 交互时停止键盘叠加

Question

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

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

更新2

现在它不再重叠，但我注意到当我离开应用程序切换到另一个应用程序或挂起NativeScript应用程序时，当我回到它时问题会重新出现。我该怎么做才能保持原始行为？

- Pixxl

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

- mohit sharma

Answer 2

在浏览了其他讨论和资源之后，以下是一些需要注意的事项：

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

这些资源中有一些要点，我将在下面进行回顾。

模板流程

首先，你需要确保你的页面布局与以下类似：

ScrollView
  > StackLayout
    > GridLayout
      > SomeElement
    > GridLayout
      > TextField

Android软键盘输入模式

这与UI中的文本字段获得焦点时显示的屏幕键盘有关。确保键盘不会覆盖您的文本字段的一个技巧是在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设置的标志在应用程序挂起和恢复时被重置。为了解决这个问题，您需要在视图控制器中进行一些调整，以监视这些事件在您的应用程序生命周期中发生，并反过来重新启用这些标志。

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

- Pixxl

---

我还想指出，在本地测试后，我确认只需要添加应用程序生命周期事件处理程序来手动重新启用此功能，如果我在同一视图中暂停并恢复应用程序。如果我回到应用程序并导航回发生此问题的视图，则它将正常工作。 - Pixxl

默认情况下，软输入模式未指定。根据Android API参考的说明，系统将尝试根据窗口内容选择其中之一。这解释了需要显式设置它的必要性。然而，我不否认有NativeScript的怪癖。此外，“adjustResize”现在已被弃用。 - Alexander Bliznyuk

Answer 3

我将翻译以下内容：

我正在使用 {N} 6.5.0，并使用此设置使其在 Android 上运行。

此示例结合了解决 iOS 问题的 PreviousNextView。

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">

- Stefano