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

Question

我正在使用 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

这将允许我在键盘显示和隐藏时设置 boolean 值，就像我在示例代码中所做的那样。 我可以隐藏图像等。

但是，它不会像 Android 那样挤压布局。

我在这里阅读了一些其他答案，这些答案也建议监听键盘事件： 如何在 SwiftUI 中显示键盘时显示完整列表

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

这是我的示例代码的存储库：

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

Answer 1

IQKeyboardManager不会更改任何视图的帧大小，而是使用 position 偏移量。

我还没有测试过，但理论上你可以通过添加一个监听视图移动的回调来做到这一点。 它可能无法很好地与视图偏移业务一起使用，并且可能会导致您的视图不稳定。

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 class 定义：

/// <reference path="./node_modules/nativescript-iqkeyboardmanager/index.d.ts" />