جاوااسکریپت - جلوگیری از نمایش کیبورد هنگام تعامل با TextField در یک برنامه NativeScript

هنگام کار با نمای یک برنامه NativeScript که در آن کاربر میتواند ورودی وارد کند، ورودی صفحهکلید برنامه بومی روی مؤلفه TextField قرار میگیرد. هرچند این مانع از ورود متن توسط کاربر نمیشود، اما جریان تجربه کاربری را مختل میکند و از نگاه رابط کاربری بد به نظر میرسد.

چطور میتوانم کاری کنم که کیبورد روی ورودی قرار نگیرد، بلکه درست مثل دیگر برنامههای بومی زیر آن ظاهر شود؟

بهروزرسانی ۲

حال که دیگر همپوشانی نمیکند، متوجه شدهام که وقتی برنامه را ترک میکنم تا به برنامه دیگری بروم یا برنامه NativeScript را معلق کنم، وقتی دوباره به آن برمیگردم، مشکل دوباره ظاهر میشود. چه کاری میتوانم انجام دهم تا رفتار اصلی حفظ شود؟

پاسخ شماره ۱

من هم همین مشکل را داشتم،

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>

این مشکل پوشش کیبورد را برطرف میکند اما مشکل دیگری ایجاد خواهد کرد، و باعث میشود نوار وضعیت/نوار عملیات هنگام نمایش کیبورد ارتفاع خود را تغییر دهد. برای حل این مشکل، موارد زیر را در style.xml در AppThemeBase قرار دهید (برای اصلاح رنگ نوار وضعیت)

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

در _app-common.scss (برای از بین بردن فضای اضافی)

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

پاسخ شماره ۲

بعد از گشتن در چند بحث و منابع دیگر:

• صفحهکلید در حال مرور نمای صفحه
• پوشش کیبورد اندروید
• صفحهکلید پوشاننده متننما

چند نکته کلیدی از این منابع وجود داشت که در ادامه آنها را مرور خواهم کرد.

جریان قالب

اول از همه، باید اطمینان حاصل کنید که طرح صفحه شما چیزی شبیه به زیر است:

ScrollView
  > StackLayout
    > GridLayout
      > SomeElement
    > GridLayout
      > TextField

حالت ورودی نرمافزاری اندروید

این مربوط به صفحهکلید روی صفحه است که وقتی یک فیلد متنی در رابط کاربری فوکوس میگیرد، نمایش داده میشود. یک راهکار برای اطمینان از اینکه صفحهکلید روی فیلد متنی شما قرار نمیگیرد این است که مطمئن شوید ویژگی windowSoftInputMode در AndroidManifest.xml شما تنظیم شده است. شما میتوانید از adjustResize یا adjustPan استفاده کنید. من کاملاً از تفاوتها مطمئن نیستم، اما برخی کاربران گزارش دادهاند که یکی یا هر دو کار میکنند، بنابراین ممکن است نیاز داشته باشید با هر کدام آزمایش کنید تا ببینید کدام برای مورد شما مناسب است. شما میتوانید اطلاعات بیشتری درباره این دو پرچم در اینجا بخوانید.

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

بهروزرسانی ۲

من معتقدم چیزی در NativeScript بازنشانی میشود که باعث میشود پرچمی که توسط android:windowSoftInputMode تنظیم شده است، هنگام suspended و resumed شدن برنامه دوباره بازنشانی شود. برای کنار آمدن با این موضوع، شما نیاز خواهید داشت برخی تنظیمات را در کنترلر خود نما انجام دهید تا برای وقوع این رویدادها در چرخه عمر برنامه خود نظارت کنید و سپس پرچمها را بهطور عقبگرد دوباره فعال کنید.

some-view.component.ts (تایپاسکریپت)

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