首页 > 编程语言> 文章详细

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

2019-11-08 09:35:58 阅读：243 来源： 互联网

标签：nativescript angular typescript nativescript-angular javascript

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

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

更新2

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

解决方法:

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

> Keyboard in going over the page view
> Android keyboard overlay
> Keyboard overlapping textview

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

模板流程

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

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

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

标签：nativescript,angular,typescript,nativescript-angular,javascript
来源： https://codeday.me/bug/20191108/2007217.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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