Website-Suche

javascript - Tastaturüberlagerung stoppen beim Interagieren mit TextField in einer NativeScript-Anwendung

Beim Arbeiten mit einer NativeScript-Anwendungsansicht, in der ein Benutzer Eingaben machen kann, überlagert die native Anwendungs-Tastatureingabe die TextField-Komponente. Obwohl dies den Benutzer nicht daran hindert, Text einzugeben, unterbricht es den UX-Fluss und sieht aus UI-Perspektive schlecht aus.

Wie kann ich erreichen, dass die Tastatur die Eingabe nicht überlagert, sondern darunter erscheint, wie es andere native Anwendungen tun können?

Update 2

Jetzt, wo es nicht mehr überlagert, ist mir aufgefallen, dass das Problem wieder auftritt, wenn ich die Anwendung verlasse, um zu einer anderen zu wechseln oder die NativeScript-App zu suspendieren. Was kann ich tun, um das ursprüngliche Verhalten beizubehalten?

Antwort #1

Ich hatte auch dasselbe Problem,

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

Das Hinzufügen des Folgenden hat bei mir nicht funktioniert

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

Anstatt android:windowSoftInputMode im application hinzuzufügen, füge es im activity hinzu, überprüfe Folgendes.

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

Muss auch die style.xml aktualisieren, füge Folgendes in LaunchScreenThemeBase ein

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

Dies wird das Problem mit der Tastaturüberlagerung beheben, aber es wird ein anderes Problem verursachen, nämlich dass die Statusleiste/Aktionsleiste ihre Höhe ändert, wenn die Tastatur angezeigt wird. Um dies zu beheben, fügen Sie Folgendes in style.xml in AppThemeBase ein (um die Farbe der Statusleiste zu korrigieren).

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

In _app-common.scss (Um zusätzlichen Platz loszuwerden)

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

Antwort #2

Nachdem ich mich durch einige andere Diskussionen und Ressourcen gekämpft habe:

  • Tastatur geht die Seitenansicht durch
  • Android-Tastaturüberlagerung
  • Tastatur überlappt Textansicht

Es gab einige Erkenntnisse aus diesen Ressourcen, die ich im Folgenden durchgehen werde.

Vorlagenfluss

Zunächst müssen Sie sicherstellen, dass Ihr Seitenlayout etwa dem unten Gezeigten entspricht:

ScrollView
  > StackLayout
    > GridLayout
      > SomeElement
    > GridLayout
      > TextField

Android Soft-Eingabemodus

Dies bezieht sich auf die Bildschirmtastatur, die angezeigt wird, wenn ein Textfeld in der Benutzeroberfläche den Fokus erhält. Ein Trick, um sicherzustellen, dass die Tastatur Ihr Textfeld nicht überlagert, besteht darin, die Eigenschaft windowSoftInputMode in Ihrer AndroidManifest.xml festzulegen. Sie können entweder adjustResize oder adjustPan verwenden. Ich bin mir nicht ganz sicher über die Unterschiede, aber einige Benutzer haben berichtet, dass entweder oder beide funktionieren, sodass Sie möglicherweise ausprobieren müssen, welche Option in Ihrem Fall funktioniert. Mehr über diese beiden Flags können Sie hier lesen.

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

Update 2

Ich glaube, dass innerhalb von NativeScript etwas zurückgesetzt wird, was dazu führt, dass das durch android:windowSoftInputMode gesetzte Flag zurückgesetzt wird, wenn die Anwendung pausiert und fortgesetzt wird. Um dies zu umgehen, müssen Sie einige Anpassungen im Controller der Ansicht selbst vornehmen, um diese Ereignisse im Lebenszyklus Ihrer App zu beobachten und dann die Flags nachträglich wieder zu aktivieren.

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

Verwandte Artikel