使用键盘 nativescript (IOS) 移动 UI 元素答案

【问题标题】：Move UI element with keyboard nativescript (IOS)使用键盘 nativescript (IOS) 移动 UI 元素
【发布时间】：2017-03-22 10:29:00
【问题描述】：

在我的 nativescript 应用程序中 - 我在屏幕底部有一个按钮。屏幕上有一个文本区域。当用户点击文本区域时，会出现一个虚拟键盘。此时，我希望底部的按钮向上移动并出现在虚拟键盘的顶部。关于如何在 android 和 iOS 中实现这一点的任何建议？

代码

<GridLayout>
<ActionBar title="" backgroundColor="#f82462" top="0" left="0">
    <NavigationButton (tap)="goBack()"></NavigationButton>
</ActionBar>
<GridLayout rows="*, auto">
    <GridLayout row ='0' rows="auto *" columns="">
        <GridLayout row="0" rows="" columns="">
            <Button text="Top Button" (tap)="goNext()"></Button>                
        </GridLayout>
        <GridLayout row="1" backgroundColor="#f82462">
            <TextView [(ngModel)]="xyz" class="input" hint="Write your question as a complete sentence.Click on camera to add images if required." returnkeyType="done" id="questionText"></TextView>
        </GridLayout>
</GridLayout>
<StackLayout row='1'>
    <Button text="Next" (tap)="goNext()"></Button>
</StackLayout>
</GridLayout>

【问题讨论】：

在这种情况下，我通常会在导航栏的右侧添加一个按钮。顺便说一句，你试过npmjs.com/package/nativescript-iqkeyboardmanager吗？
感谢@EddyVerbruggen 的回复。在我的 UI 中，我在操作栏中有一个搜索栏，并且无法在其中放置任何其他内容。对于 IOS，我安装了 iqkeyboard，但不幸的是，它并不能帮助我实现将按钮移动到键盘顶部的目标。

标签： nativescript angular2-nativescript nativescript-telerik-ui

【解决方案1】：

我现在无法对此进行测试，但是您是否尝试将所有内容都包含在 <ScrollView> ... </ScrollView> 中的主 GridLayout 中

【讨论】：

这对我有用。至少在安卓中。从未在 iOS 上测试过

【解决方案2】：

我的即时聊天应用程序也遇到了这个问题，这里是解决方案：https://gist.github.com/elvticc/0c789d08d57b1f4d9273f7d93a7083ec

// Also use IQKeyboardManager to customize the iOS keyboard
// See https://github.com/tjvantoll/nativescript-IQKeyboardManager

// let iqKeyboard: IQKeyboardManager = IQKeyboardManager.sharedManager();
// iqKeyboard.toolbarDoneBarButtonItemText             = "OK";
// iqKeyboard.canAdjustAdditionalSafeAreaInsets        = true;
// iqKeyboard.shouldFixInteractivePopGestureRecognizer = true;

// Angular
[...]
import { OnInit, OnDestroy, ElementRef, ViewChild } from "@angular/core";
[...]

// NativeScript
[...]
import { ios as iosApp } from "tns-core-modules/application/application";
[...]

@ViewChild("element") private _element: ElementRef<StackLayout>; // FlexboxLayout, GridLayout, etc.

private _keyboardHeight: number = 0;
private _elementHeight:  number = 0;
private _observerIDs:    Array<object> = new Array();

// Start events when the component is ready
ngOnInit(): void {

    // iOS keyboard events
    if (iosApp) {

        let eventNames: Array<string> = [
                UIKeyboardWillShowNotification,
                UIKeyboardDidShowNotification,
                UIKeyboardWillHideNotification
            ];

        // Catch the keyboard height before it appears
        this._observerIDs.push({
            event: eventNames[0],
            id: iosApp.addNotificationObserver(eventNames[0], (event) => {

                    let currHeight: number = this._keyboardHeight,
                        newHeight:  number = event.userInfo.valueForKey(UIKeyboardFrameEndUserInfoKey).CGRectValue.size.height;

                    if (currHeight != newHeight) {

                        this._keyboardHeight = newHeight;

                    }

                })
        });

        // Position the element according to the height of the keyboard
        this._observerIDs.push({
            event: eventNames[1],
            id: iosApp.addNotificationObserver(eventNames[1], (event) => {

                    if (this._elementHeight == 0) {

                        this._elementHeight = this._element.nativeElement.getActualSize().height;

                    }

                    this._element.nativeElement.height = this._keyboardHeight + this._elementHeight;

                })
        });

        // Reposition the element according to its starting height
        this._observerIDs.push({
            event: eventNames[2],
            id: iosApp.addNotificationObserver(eventNames[2], () => {

                    this._element.nativeElement.height = this._elementHeight; // or "auto";

                })
        });

    }

}

// Stop events to avoid a memory leak
ngOnDestroy(): void {

    if (iosApp) {

        let index: number = 0;

        for (index; index < this._observerIDs.length; index++) {

            let observerId: number = this._observerIDs[index]['id'],
                eventName:  string = this._observerIDs[index]['event'];

            iosApp.removeNotificationObserver(observerId, eventName);

        }

    }

}

Marcel Ploch 的原话：https://gist.github.com/marcel-ploch/bf914dd62355049a0e5efb4885ca4c6e

【讨论】：