在NativeScript应用程序中与TextField交互时，停止键盘覆盖 [英] Stop keyboard overlay when interacting with TextField in a NativeScript application
问题描述
在用户可以输入输入的NativeScript应用程序视图中使用时，本机应用程序Keyboard Input会覆盖TextField组件.虽然这不会阻止用户输入文本，但会打乱UX流，并从UI角度来看看起来很糟糕.
When working with a NativeScript application view where a user can enter input, the native application Keyboard Input overlays the TextField component. While this doesn't stop the user from entering text, it disrupts the UX flow and looks bad from a UI perspective.
如何使键盘不覆盖输入，而是像其他本机应用程序那样显示在其下方?
How can I get the Keyboard to not overlay the input, but instead appear underneath it like other native applications can do?
更新2
现在它不再覆盖，我注意到当我离开该应用程序以切换到另一个程序或 suspend NativeScript应用程序时，当我再次遇到该问题时，该问题再次出现.我该怎么做才能保持原始行为?
Now that it no longer overlays, I've noticed that when I leave the application to switch to another one or suspend the NativeScript app, when I come back to it the problem reappears. What can I do to persist the original behavior?
推荐答案
在讨论了其他一些讨论和资源之后:
After stumbling around a few other discussions and resources:
- Keyboard in going over the page view
- Android keyboard overlay
- Keyboard overlapping textview
这些资源有一些收获，我将在下面进行回顾.
There were a few takeaways from these resources which I'll review below.
首先，您需要确保页面布局与以下内容类似:
First off, you'll need to ensure your page layout mirrors something like below:
ScrollView
> StackLayout
> GridLayout
> SomeElement
> GridLayout
> TextField
Android软输入模式
这与屏幕键盘有关，该键盘在UI中的文本字段获得焦点时显示.确保键盘不覆盖文本字段的一种技巧是确保在AndroidManifest.xml中设置了属性windowSoftInputMode.您可以使用adjustResize或adjustPan.我不确定这些差异，但是有些用户报告了这两种方法中的一种或两种都可以使用，因此您可能需要尝试哪种方法适合您的情况.您可以在此处了解更多信息.
Android Soft Input Mode
This relates to the on-screen keyboard that displays when a text field in the UI receives focus. One trick to ensure the keyboard does not overlay your textfield is to ensure you have the property windowSoftInputMode set in your AndroidManifest.xml. You can either use adjustResize or adjustPan. I'm not entirely sure of the differences, but some users have reported either or both working so you might need to play around with which works for your case. You can read more about these two flags 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中会有一些重置，这会导致在应用程序为suspended和resumed时重置由android:windowSoftInputMode设置的标志.要解决此问题，您需要在视图本身的控制器中进行一些调整，以便 watch 在应用程序的生命周期中发生这些事件，然后追溯地启用再次标记.
Update 2
I believe there is something getting reset within NativeScript which is causing the flag set by android:windowSoftInputMode to be reset when the application is suspended and resumed. To get around this, you'll need to make some adjustments in the controller of the view itself to watch for these events to happen in your app's lifecycle and then retroactively enable the flags again.
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应用程序中与TextField交互时，停止键盘覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
