NativeScript-iOS在出现键盘时如何调整视图

问题描述 投票:-1回答:1

我正在使用NativeScript 6.4.1和Angular 8构建应用程序。

我一直在Android上进行这项工作,如果我们在AndroidManifest文件中设置了'android:windowSoftInputMode="adjustResize"',则在键盘打开的情况下布局会调整:How to adjust layout when soft keyboard appears

我提供了示例代码。我有一个带有文本字段的登录页面。我希望视图随着键盘的出现而压缩。

例如看到图片以获得理想的结果

我更改了AndroidManifest文件:https://github.com/NativeScript/NativeScript/issues/5088#issuecomment-353394591

并收听页面事件layoutChanged事件,如示例代码所示。

对于Android来说效果很好。

我的问题:iOS是否有等效行为?

这是我为iOS做的研究:

我尝试使用此强烈推荐的插件:https://www.npmjs.com/package/nativescript-iqkeyboardmanager

虽然它阻止键盘覆盖文本字段,但是它无助于我压缩视图。

https://developer.apple.com/documentation/uikit/uikeyboarddidshownotification?language=objc

https://github.com/NativeScript/NativeScript/issues/2907

https://stackoverflow.com/questions/26070242/move-view-with-keyboard-using-swift

我们可以听和响应许多键盘事件。

例如:

UIKeyboardWillShowNotification
Posted immediately prior to the display of the keyboard.

UIKeyboardDidShowNotification
Posted immediately after the display of the keyboard.

UIKeyboardWillHideNotification
Posted immediately prior to the dismissal of the keyboard.

UIKeyboardDidHideNotification
Posted immediately after the dismissal of the keyboard.

UIKeyboardWillChangeFrameNotification
Posted immediately prior to a change in the keyboard’s frame.

UIKeyboardDidChangeFrameNotification
Posted immediately after a change in the keyboard’s frame.

UIKeyboardAnimationDurationUserInfoKey
UIKeyboardIsLocalUserInfoKey
UIKeyboardCenterBeginUserInfoKey
UIKeyboardFrameEndUserInfoKey

这将使我能够像在示例代码中一样显示和隐藏键盘时设置布尔值。我可以隐藏图像等。

但是,它不会以与Android相同的方式压缩布局。

我在这里阅读了其他一些答案,它们也建议您监听键盘事件:How to show complete List when keyboard is showing up in SwiftUI

显示键盘时如何压缩布局?

这里是我的示例代码的存储库:

https://github.com/aubrey-fowler/KeyBoardHelp

enter image description hereenter image description here

ios user-interface layout nativescript native
1个回答
1
投票

[IQKeyboardManager不会更改任何视图的帧大小,而是使用位置偏移。

我还没有测试过,但是从理论上讲,您可以通过添加一个侦听视图移动的回调来做到这一点。它可能不适用于视图偏移业务,并且可能会导致视图不稳定。

import { isIOS } from 'tns-core-modules/platform/platform';
if (isIOS) {
    IQKeyboardManager.sharedManager().movedDistanceChanged = (delta: number) => {
        console.log(`IQKeyboardManager (moved distance): ${delta}`);
    };
}

记住要添加到您的references.d.ts中以获得IQKeyboardManager类定义:

/// <reference path="./node_modules/nativescript-iqkeyboardmanager/index.d.ts" />
© www.soinside.com 2019 - 2024. All rights reserved.