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

Question

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

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

更新 2

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

Answer 1

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

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

模板流程

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

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 设置的标志在应用程序为 suspended 和 resumed 时被重置。要解决此问题，您需要在视图本身的控制器中进行一些调整，以 watch 让这些事件在您的应用程序的生命周期中发生，然后追溯再次启用标志。

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

Answer 2

我也遇到了同样的问题，

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（去掉多余的space）

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

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

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

Stop keyboard overlay when interacting with TextField in a NativeScript application

javascript

typescript

nativescript

nativescript-angular

angular

模板流程

Android软输入模式

更新 2

一些-view.component.ts (TypeScript)