Question

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

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

更新2

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

Answer 1

我也遇到了同样的问题，

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

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

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

不要在android:windowSoftInputMode中添加application，而是在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;  
    }

Answer 2

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

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

模板流程

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

ScrollView
  > StackLayout
    > GridLayout
      > SomeElement
    > GridLayout
      > TextField

Android软输入模式

这与屏幕键盘有关，该键盘在UI中的文本字段获得焦点时显示。确保键盘不覆盖文本字段的一种技巧是确保在windowSoftInputMode中设置属性AndroidManifest.xml。您可以使用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 在应用程序的生命周期中发生这些事件，然后追溯地启用再次标记。

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

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交互时，停止键盘覆盖

3 个答案:

模板流程

Android软输入模式

更新2

some-view.component.ts（TypeScript）