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

Posted 2023-04-14

【中文标题】NativeScript - ios如何在键盘出现时调整视图

【英文标题】：NativeScript - ios how to adjust view when keyboard appears

【发布时间】：2020-08-20 06:03:01

【问题描述】：

我正在使用 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://***.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

【参考方案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" />